我正在使用 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>
循环内的值也设置为初始值。
当我修改输入中的值时,<p>
ng-repeat block 内的值正确更新,但 <p>
block2 中的标签更新失败。
为什么会这样? ng-repeat 是否创建了自己的隔离范围?如果是这样,我怎样才能更新 Controller 级别的范围?另外,有人可以解释一下这种行为背后的想法及其提供的任何优势吗?
最佳答案
ng-repeat
为每个重复项创建一个子作用域。因此,您试图将原语传递给子作用域,而子作用域不会创建对父级的引用。但是,当您传递对象时,您传递的是原始对象引用。
出自 Angular 之父之一之口:
Always have a dot in ng-model
This is a great video regarding Angular Best Practices由 Angular 创作者 (2012/12/11) 提供。转到第 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>
关于javascript - 在 ng-repeat 中修改 Angular Scope 中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20589417/