我正在使用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" } }
在这个例子中,在块2中的文本设置为初始值test.a和test.b。输入值和<p>循环内部的值也被设置为初始值。
test.a
test.b
<p>
当我修改输入中的<p>值时,ng-repeat块内部的值会正确更新,但<p>block2中的标签无法更新。
为什么会这样呢?ng- repeat是否会创建自己的隔离范围?如果是这样,我如何获得控制器级别范围的更新?另外,有人可以解释这种行为背后的想法以及它提供的任何好处吗?
JSFiddle显示问题
ng-repeat为每个重复项创建一个子范围。结果,您试图将原语传递给子范围,而不会创建对父范围的引用。但是,当您传递对象时,您将传递原始对象引用。
ng-repeat
从Angular的一位父亲的嘴中:
ng-model中总是有一个点
这是 Angular创作者提供的 有关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>
**[DEMO](http://plnkr.co/edit/ymzbgHMdsOEkxmRjPBkG?p=preview)**