![](/img/trans.png)
[英]Angular ng-repeat variable to access inside another scope objects
[英]Modifying objects within Angular Scope inside ng-repeat
我正在使用ng-repeat在HTML中创建一个表单,以从作用域中的对象生成表单元素。 我还使用该对象生成ng-repeat之外的其他元素。
HTML中的简化示例如下所示:
<div ng-app="App">
<div ng-controller="Ctrl">
<div class="block1">
<form ng-repeat="(key, value) in test">
<label>{{key}}</label>
<input ng-model="value" />
<p>{{value}}</p>
</form>
</div>
<div class="block2">
<p>
{{test.a}}
</p>
<p>
{{test.b}}
</p>
</div>
</div>
</div>
这在JS中:
angular.module('App', []);
function Ctrl($scope) {
$scope.test = {
a:"abc",
b:"def"
}
}
在此示例中,block2中的文本设置为test.a
和test.b
的初始值。 循环内的输入值和<p>
值也设置为初始值。
当我修改输入中的值时,ng-repeat块内的<p>
值会正确更新,但block2中的<p>
标记无法更新。
为什么这是行为? ng-repeat是否创建了自己的隔离范围? 如果是这样,我如何才能让控制器级别范围更新? 此外,有人可以解释这种行为背后的想法及其提供的任何好处吗?
ng-repeat
为每个重复项创建子范围。 因此,您尝试将原语传递给子范围,而不会创建对父级的引用。 但是,传递对象时,会传递原始对象引用。
从Angular的一位父亲口中说:
在ng-model中总是有一个点
这是 Angular创作者(2012/12/11)提供的关于Angular Best Practices的精彩视频 。 转到第31分钟,详细了解这一情况
将数据修改为对象数组:
$scope.test = [{ val:"abc",key:'a'}, {val:"def",key:'b'} ]
然后在转发器中:
<form ng-repeat="item in test">
<label>{{item.key}}</label>
<input ng-model="item.val" />
<p>{{item.val}}</p>
</form>
试试这个:
angular.module('App', []);
function Ctrl($scope) {
$scope.test = [
{label:"a", value:"abc"},
{label:"b", value:"def"}
]
}
和
<div ng-app="App">
<div ng-controller="Ctrl">
<div class="block1">
<form ng-repeat="o in test">
<label>{{o.label}}</label>
<input ng-model="o.value" />
<p>{{o.value}}</p>
</form>
</div>
<div class="block2">
<p>
{{test[0].value}}
</p>
<p>
{{test[1].value}}
</p>
</div>
</div>
</div>
Angularjs使用对象通过引用传递的事实。 因此,如果将对象传递给函数并更改函数内的对象,则外部对象也会更改。 看看这个更新的JSFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.