Angular 1/ ng-如果只在某个条件下进行一次性绑定
Angular 1是一个流行的前端开发框架，它使用了双向数据绑定的概念来实现数据和视图之间的自动同步。ng-if是Angular 1中的一个指令，用于根据条件来决定是否渲染某个元素或组件。
一次性绑定是指在特定条件下只进行一次数据绑定，之后不再更新。在Angular 1中，ng-if指令可以用来实现一次性绑定。当条件为真时，ng-if会渲染对应的元素或组件，并进行数据绑定。一旦条件变为假，ng-if会从DOM中移除对应的元素或组件，并销毁相关的数据绑定。
ng-if的优势在于它可以根据条件动态地添加或移除元素或组件，从而提高页面的性能和响应速度。当条件为假时，ng-if会从DOM中移除对应的元素或组件，减少了不必要的渲染和数据绑定操作。这对于复杂的页面或有大量数据的情况下尤为重要。
ng-if的应用场景包括但不限于：
- 根据用户权限动态显示或隐藏某些功能或页面元素。
- 根据用户输入的条件动态显示或隐藏某些表单字段。
- 根据数据加载状态动态显示或隐藏加载动画或提示信息。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法给出具体的链接。但腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，包括云服务器、云数据库、云存储等。您可以访问腾讯云的官方网站，了解更多关于腾讯云的产品和服务。
相关·内容
我正在尝试理解angular 1摘要循环是如何工作的，以及它们如何影响现有的作用域。我有两个控制器，其中一个是使用转发器的角度材质。第二个控制器是一个简单的按钮单击事件。这两个事件都会打印到控制台，以查看发生了什么。
我看到的是，每次我点击第二个控制器上的按钮，中继器都会重新运行它的整个计算？
这就是angular的工作原理吗？请参阅附件中的代码-当点击按钮时，中继器每次都会在第一个控制器上重新运行。我假设每次在任何控制器上发生任何操作时，都会发生这种情况--这看起来很疯狂。
中继器代码如下：
<div flex="50" ng-repeat="item in i
浏览 0提问于2015-12-23得票数 0
当绑定的变量可以经常改变时，双向绑定是很酷的，但在某些情况下，变量在赋值后不会改变，或者只会改变一次。
有没有办法告诉angular，绑定不再需要在分配后或仅更改一次后监控更改？
(适用于angular 1.x)
浏览 0提问于2016-10-02得票数 0
我是angular-js的新手，我认为这是一个基本的问题，如何从angular-js中的段落标签中获取值？我尝试使用ng- value.Can，但是没有人给我帮助吗？
浏览 1提问于2015-11-28得票数 4
所以我们不想将模型附加到作用域，不应该在后端创建监视器。在Angular 1X中这是可能的吗？
浏览 0提问于2017-04-12得票数 0
有一种方法可以更新对象中的值和我的视图(HTML)显示新值，而无需使用与Angular 1.5.3的双向绑定？
浏览 0提问于2016-06-03得票数 0
我一直在Angular 1.x的指令中使用隔离作用域。但是，我发现了一个只使用了ngModel的指令。现在，我已经看到在使用两者时存在一些问题(我知道这是可能的，某种程度上？)。
无论如何，我的问题是，使用隔离作用域和需要ngModel时的主要区别是什么
我做了一个例子，基于这个，我看不出有什么不同？此处提供了该示例：
因此，欢迎任何形式的解释。
提前感谢！
浏览 4提问于2016-07-25得票数 0
我有一个ng-repeat，在那个ng-repeat里面我有
<p style="color:red">Booked Ref : {{agencyref(contentzz.Ref)}}</p>
根据angular的工作方式，它会不断地运行函数，但该函数内部有一个HTTP请求，我只想运行它一次。还有什么我可以用的吗？
浏览 0提问于2016-08-25得票数 0
我发现UI Bootstrap日期选择器通过包含特定语言的i18n js文件来支持本地化，例如：
<script src="https://code.angularjs.org/1.0.2/i18n/angular-locale_fr-fr.js"></script>
但这使得该语言固定为法语。有没有办法在两种语言之间切换，比如点击一个按钮就可以在英语和法语之间切换？？
浏览 0提问于2015-12-02得票数 1
我在Angular 1.3中发现了一个非常奇怪的行为：
当我改变的时候它就会发生
{{item}}
进入：
{{::item}}
然后单击“复制”按钮；它所要做的就是复制位于给定索引处的项，并将其放在源项的下面。相反，它所做的是复制列表中的最后一项，并将其添加到列表的底部！
HTML：
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items track
浏览 1提问于2015-07-01得票数 0
我有下面的AngularJS控制器和服务模块。基本上，我想做的是在创建新客户之后刷新custController.allCustomers，以便新客户出现在UI上。
但是，每当我调用custController.createCustomer时，allCustomers中的数据就没有新的客户。我怀疑我用诺言的方式有什么不对。你能帮忙吗？
controlers.js
angular.module('CustomerModule')
.controller('CustomerController', function ($log, CustomerService) {
浏览 2提问于2015-10-04得票数 3
回答已采纳
我只想在angular中设置元素的高度一次，但我不想在其中使用jquery，我不能使用ng样式，因为它会多次触发。
这是我的html
<md-card>
<md-table-container flex>
<md-virtual-repeat-container id="vrContainerProcessFlow" ng-init="$ctrl.getMdTableContainerWidth()">
<table md-
浏览 0提问于2016-09-29得票数 0
ng-init是否像ng-模型一样监视实例化属性上的更改？
显然不是，所以我设置了一个表如下所示：
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch('myProp1', function(newVal, oldVal){
$scope.myProp1 = newVal
})
});
html
<body ng-controller="MainCtrl
浏览 0提问于2014-08-29得票数 7
回答已采纳
我从一些AngularJs实践开始，我想创建基于JSON文件的动态页面。
在加载页面时，我会得到以下错误：
Error: [$parse:syntax] http://errors.angularjs.org/1.4.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=23&p3=SelectedPage.SetPage(%7B%7Bpage.Number%7D%7D)&p4=%7Bpage.Number%7D%7D)
at Error (native)
at http://localhost/AngularJs/scrpts/
浏览 3提问于2015-09-29得票数 2
回答已采纳
1回答
编辑ng-重复值
、、
我对天使很陌生。我正在尝试编辑$scope.works中的数据。我也尝试过xeditable，但实际上做不到。我知道这是件很简单的事。但你的回答会很有帮助。谢谢。
这是我的密码-
我的angular.js代码-
$scope.works=[{id:'01', position:'web designer' ,place:'Artle' ,month:'April',year:'2014',month1:'April',year1:'2015',city:'d
浏览 4提问于2015-06-17得票数 1
回答已采纳
我在我的AngularJS应用程序上添加了缺失的翻译处理程序日志，以便在控制台上打印字符串的缺失翻译。然而，似乎所有的消息都在控制台上打印了多次。
日志如下：
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation f
浏览 24提问于2017-01-14得票数 0
回答已采纳
我是new，使用的是类型记录/Angular2 2语言。我正在尝试从一本打字本中开发示例应用程序，但我总是遇到以下错误：
No provider for RuntimeMetadataResolver (ComponentResolver -> RuntimeCompiler -> RuntimeMetadataResolver)
在浏览器控制台中。我认为问题在于packages.json中的组件版本。Angular2是使用npm安装的，所以版本是2.0beta17。
堆栈跟踪：
BaseException@file:///C:/ProgettiWeb/TestAngular/Ch
浏览 4提问于2016-11-24得票数 1
回答已采纳
就像构建一个简单的应用程序一样，试图在angularJS上得到一个句柄，在这个应用程序中，你可以列出一个人的列表，在列表中他们的名字是彩色的。颜色由“选择”下拉框选择.
麻烦的是，无论我怎样尝试给我遇到麻烦的样式添加新的颜色。此时，名称被正确地添加到列表中，但是它们的颜色不正确，我得到了以下错误：
Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{c
浏览 2提问于2014-05-07得票数 0
回答已采纳
2回答
所以如果在angular.js中发现这个非常有趣的bug。如果在ng-重复中有一个自定义指令正在积极地更改指令中的变量，请不要更新。这意味着，如果我的数组中有3个元素用于ng-重复，它会很好地初始化，但是如果我从数组中删除元素1，那么元素1传递给它的子指令的任何变量都会以元素2的子指令结束，这里是我的示例代码。
<div ng-app='testing'>
<div ng-controller='testing as test'>
<div ng-repeat='item in test.exampl
浏览 2提问于2016-01-07得票数 2
回答已采纳
我在一个angular应用程序上工作，其中我必须使用20个不同的过滤器，我计划在客户端过滤数据，即使用自定义的angular过滤器，我已经创建了所有的自定义过滤器，但问题是每次一个值被我的过滤器触发的一些函数改变时，它会变得一团糟now.Is有没有办法防止这种情况发生？
浏览 0提问于2015-12-21得票数 2
3回答
我需要执行一个非常简单的“ng-include "，而我无法做到这一点。任何帮助都将不胜感激。
这是我需要帮助的部分
<div class="slide-animate" ng-include="'template1.html'"></div>
我使用了其他地方提到的单引号。我不知道为什么这不管用。它会是角框架的初始化吗？这可能是代码中的其他冲突特性吗？
这里有完整的密码。
<!doctype html>
<html lang="en">
<he
浏览 3提问于2015-01-02得票数 0
回答已采纳
我正试着让我的观点之一在全球范围内发挥作用。
我从这个开始
我已经看过这些答案：
据我所知，所有这些都在同一个控制器中进行ng单击，而我试图调用的函数位于不同的控制器中，但它有$scope，因此如果我没有弄错，那么该函数应该可以在任何地方访问。
有关守则(对不起)：
index.html：
<!doctype html>
<html lang="en" ng-app="floorForceApp">
<head>
<meta charset="utf-8">
<tit
浏览 4提问于2020-07-04得票数 0
回答已采纳
1回答
我有一个伪代码，其中使用单向绑定运算符(::)尝试查看angular是否在监视更改。所以我不得不把它包含在一个input标记中。input标记内的model data应该以一种方式进行解析，因为它之前是::。但是，如果我对输入进行了更改，并单击按钮查看更改，则会在日志中反映更改。但它不应该关注这些变化。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs
浏览 5提问于2015-11-25得票数 1
8回答
这就是问题所在：
它呈现以下内容：
<div ng-repeat="group in Model.Groups">
<span>{{group.Name}}</span>
<div ng-repeat="filter in group.Filters">
<input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
<select ng-disable
浏览 1提问于2013-03-03得票数 27
有没有可能编译AngularJS应用程序来删除像(ng-click)这样的ng-*指令，并生成像Angular 2+这样的普通超文本标记语言？如果我们使用chrome开发工具检查Angular 2应用程序，它不会显示像onClick这样的事件处理程序。但是AngularJS显示的是ng-click、ng-for等。
浏览 1提问于2019-03-27得票数 0
我正在制作一个简单的程序，在这个程序中，输入数据必须只显示输入一次。但是，我无法获得预期的结果，因为span中没有显示任何内容(控制台中也没有错误)。有人能帮我吗？
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
</
浏览 4提问于2016-03-10得票数 0
回答已采纳
1回答
我有一个iscolated范围指令，它与'=‘共享作用域。我们需要将一个对象传递给指令。当将对象及其属性传递给指令时，该指令工作良好，并且在指令中修改后，该对象将正确地返回到调用视图。
但是，当调用视图传递声明为null的相同对象时，即使修改了指令中的对象，该对象也会作为null返回。
该指令的有关部分如下：
.directive("lookupCentrosDeGestion", function () {
var _controller = ['centrosDeGestionServices', 'toastr', func
浏览 3提问于2016-08-29得票数 0
回答已采纳
1回答
我一直在浏览angular.io上的指南，并偶然发现了。在提供的示例中，ngClass的源是一个组件函数：
// HTML
<div [ngClass]="setClasses()">This div is saveable and special</div>
// Controller
setClasses() {
let classes = {
saveable: this.canSave, // true
modified: !this.isUnchanged, // false
special: this
浏览 4提问于2017-01-09得票数 2
回答已采纳
我在一个更大的Python Django HTML页面中有一段angular代码-
{% verbatim %}
<div ng-controller="FwCompController">
<tbody ng-repeat="fwComp in fwCompList">
<tr>
<td>
<div class="form-group" >
<select
浏览 1提问于2015-02-14得票数 0
1回答
我试图使用ng-重复中的ng单击将数组元素保存到另一个变量中，但是当我单击该元素时，它不起作用。
这是我的守则：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</
浏览 1提问于2015-03-15得票数 0
回答已采纳
在一些angular js文件中，我看到了下面的语法。双倍可乐"::“是什么意思？
<span>{{::x}}</span>
<div>{{::y.z()}}</div>
浏览 0提问于2015-03-23得票数 4
我有一个DTO对象，它有一个Date参数。我将此Dto包装在视图模型对象中，然后在视图中将其属性绑定到标签。
<label class="form-control">{{controller.ViewModel.Date}}</label>
因此，在视图模型中，我有一个getter。(我使用的是TypeScript)
public get Date(): Date {
return new Date(Date.parse(this.dto.Date));
//return moment(this.dto.Date).toDate();
}
浏览 5提问于2015-12-24得票数 6
我需要在页面的不同部分输出来自相同ng-repeat的数据的两个列表。例如：
// list # 1
<ul ng-repeat="item in items track by item.id">
<li ng-bind="item.name"></li>
</ul>
// list # 2
<ul ng-repeat="item in items track by item.id">
<li ng-bind="item.color"><
浏览 0提问于2015-11-05得票数 2
在这段代码中，我将ng-单击设置为一个自定义元素指令，并且我确信警报“从指令开始工作！”当用户单击呈现的文本时应该会弹出。它不起作用。
我知道我可以使用JQuery将事件侦听器附加到elem对象，但我仍然很好奇为什么我的代码不能工作，以及是否可以使用ng-单击这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
浏览 5提问于2017-05-02得票数 1
我在一大段代码中有一个简单的场景：
角应用程序和控制器(全部工作正常)
稍后动态创建一个ng-model元素(或者说它来自ajax调用)。如何将它绑定到控制器上？
例如：
var dtApp = angular.module('App1', []);
dtApp.controller('Cont1', function($scope)
{
.
.
.
.
$scope.xyz='1';
}
.
.
.
//element created dynamically on click:
<input typ
浏览 6提问于2017-03-29得票数 1
回答已采纳
我在JavaScript中使用QML。我想知道下面的错误到底是什么意思，这样我就可以修复它：
QML TextField: Binding loop detected for property "text"
有时，我的应用程序会给出此警告，但我无法理解它
浏览 1提问于2013-07-03得票数 6
回答已采纳
3回答
这是Angular中的一个bug，还是我遗漏了什么：
从指令的模板中调用一个函数会显示该函数被执行了11次！使用模板and，22次！使用字符串模板。
angular.module('testDirective', [])
.directive('myDirective', function() {
return {
scope:{},
template: '{{increment()}} {{count}}',
controller: fu
浏览 1提问于2015-06-03得票数 2
2回答
ng-重复显示空表行
、、、
当我使用<td>时，我会得到空的ng-repeat标记。<td>的数量等于服务/api返回的记录数。我已经在登记了--督察 scope有正确的记录。有人能指出我做错了什么吗？
Index.html看起来像：-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Admin</title>
<meta name="description" content=&#
浏览 2提问于2016-02-28得票数 1
回答已采纳
2回答
我有一个显示文本的div。下面有一个文本区域，可以编辑div.On的文本，键入文本区域的文本，div文本的变化，我不想这样做，happen.The的问题是div，文本区域在ng- textarea中，否则我会对两者使用不同的范围。
<div ng-repeat="item in list">
<div>
{{item.text}} // this is the text that is changing when typing in text area
</div>
<div>
&
浏览 2提问于2016-04-18得票数 0
回答已采纳
1回答
我正在使用Angular.js 'ng- grid‘数据网格，并试图使其行为具有响应性。当我调整屏幕大小时，我希望网格列可以自动堆叠，而不是保持网格的固定宽度。
我发现有几个链接提到了一个废弃的ngGridLayoutPlugin，这些链接都导致了GitHub上的死胡同。我也见过像angular-deckgrid这样的其他网格，但我对改变网格不感兴趣。
有没有什么方法可以让ng-grid响应呢？
浏览 0提问于2014-09-03得票数 8
回答已采纳
我不知道为什么会出错。当您在ng-repaet中运行ng-单击时，就会发生未登录的ReferenceError。您确定不知道没有发生单击事件的原因吗？
test.js
var MyApp = angular.module('MyApp', []);
MyApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.add = function() {
alert("add click");
};
$scope.list =
浏览 2提问于2014-11-06得票数 0
回答已采纳
1回答
我试图用ng显示显示一个带有错误消息的div，并将ng类设置为带表达式的淡出。在设定的时间后，消息会逐渐消失，但是，为显示错误消息而创建的div不会被删除。
当消息消失时，我也希望删除创建的div。有人能帮忙吗？
这是我的代码-
这是我的html代码
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<
浏览 0提问于2018-06-19得票数 0
回答已采纳
我在“角5”项目中添加了NGBootstrap。但是过了一段时间，它就不起作用了，我的错误越来越少了。试图通过升级CLI版本来解决问题，但仍然没有解决问题。请查一下package.json。
src/app/app.module.ts中的错误(5，27)：ERROR TS2307:无法找到模块@ng-引导/ng-引导。src/app/find-product/searchtabcontent/search-by-family/search-by-family.component.ts(2,48)：error TS2307:无法找到模块‘@ng-引导/ng-引导’
package.jso
浏览 2提问于2018-05-16得票数 20
我在Angularjs中有一个指令，它将有一个包含很多行(超过1000行)的表，所以我的老板说我不应该使用绑定来创建网格内容(因为angular的绑定限制约为2000)，相反，我应该动态创建dom元素。
我用angular.element(...)做到了这一点，它起作用了。但是现在我在想，如果我使用原生的js document.createElement，是否可以提高性能。
那么jqlite比纯js慢吗？当生成超过1000行html时，它会产生多大的影响？
jquery更快?更慢还是等同于jqlite？
更新：
@Joe Enzminger +1用于一次性绑定，这对于报表/打印视图是很好的，因
浏览 0提问于2015-05-13得票数 3
我是一个叫'AngularJS‘的新手，所以我一度被卡住了。
考虑下面的代码示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p&g
浏览 10提问于2016-03-14得票数 0
我在package.json中添加了依赖项下的@ng引导/ng引导1.0.0-alpha.23 .23库。
package.json
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http":
浏览 3提问于2017-04-20得票数 0
我已经为我的Angular应用程序安装了AWS Cognito，并且我正在尝试将文件挂接到ng- s3.putObject -upload Upload服务中。
我想使用ng-file-upload的Upload.upload()方法，但我不知道如何将现有的身份验证连接与Cognito一起使用。其思想是使用ng-file- upload的拖放，然后upload将使用现有的Cognito连接上传到s3。我该怎么做呢？我之所以要使用ng-file-upload的Upload.upload()方法，是为了帮助保留一些功能，比如进度条(如果这是不正确的，请纠正我)。
浏览 0提问于2015-11-24得票数 2
我有一个如下所示的ng-select： <ng-select
class="minimal"
[items]="productGroupTags"
[(ngModel)]="selectedProductGroup">
<ng-template ng-option-tmp let-item="item">
{{ item.nameI18n | multilanguagePipe }}
</ng-tem
浏览 45提问于2021-08-13得票数 0
2回答
我试图使用ngStyle指令将自定义样式应用于ng模板，我想要制作一个Slider，它显示使用Swiper的电影信息，如果我删除Slider的ngStyle指令，Slider才能工作，只有当我添加Slider指令时，Slider才能工作。
slider.component.html：
<swiper [config]="swiperConfig">
<ng-template
swiperSlide
*ngFor="let movie of movieList | slice:0:10"
浏览 1提问于2022-02-05得票数 0
回答已采纳
我正在构建一个大表(3,000+行)，其中包含来自AngularJS (1.2.26)的ng重复指令。数据是时间和温度[[time, temperature], [time, temperature], ...]数组的一个非常简单的数组。
这是数据在表中显示的方式(使用)：
table.table.table-bordered
thead
tr
th.time.first-child= t('Time')
th.temperature.sensor
tbody
tr[bindonce ng-repeat
浏览 2提问于2015-02-10得票数 2
回答已采纳
我使用的是嵌套的组件结构，在获得默认的“所有”选项以处理ng选项生成的选择列表时遇到了困难。我在这一页的底部添加了一个柱塞。如果我检查生成的列表的作用域，就会发现"All“返回的是null，而不是空字符串。下面添加了柱塞。
var app = angular.module('plunker', []);
app.component('keyfeed', {
bindings: {
search: '='
},
template: `
<ul>
<li ng-repeat=
浏览 3提问于2017-05-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
