我正在遍历一系列数据,并希望动态绑定一个模型。我的问题是,当循环遍历元素时,Angular似乎会为每次迭代创建一个新的作用域,所以三次迭代中的模型都不一样。
我已经做了一个我的代码不工作的简化示例;
http://jsfiddle.net/Fizk/uurL65e5/<div ng-app="">
<p ng-repeat="key in [1,2,3]">
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
</div>
与非动态方式相反:
http://jsfiddle.net/Fizk/d0smns1v/<div ng-app="">
<p>
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
<p>
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
<p>
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
</div>
实际的代码有点复杂,我不能硬编码字段的数量,因为它是从api动态获取的。
我查阅了大量关于动态模型绑定的问题,并查阅了文档,但没有运气。
有没有人能告诉我如何让这三个字段使用相同的模型,这样它们就会很好地更新?
Angular 1.3增加了一个controllerAs
选项,它可以解决你在处理子作用域和作用域继承时遇到的所有问题。
这被认为是当今的最佳实践。我为你制作了一个活塞。
<div ng-app="myApp" ng-controller="myCtrl as vm">
<p ng-repeat="key in [1,2,3]">
<input type="text" ng-model="vm.contact.name" />
{{contact}}
</p>
</div>
<script>
angular.module("myApp", []).controller("myCtrl", function() {
var vm = this;
// use vm.value instead of $scope.value
});
</script>
我强烈推荐阅读这篇文章:理解作用域。
要理解新的controllerAs
语法,你应该看看:探索Angular 1.3:绑定到指令控制器。
如果您在创建子作用域之前将contact指定为父作用域中的对象(我使用ng-init来完成此操作,但它在控制器中更有意义),它将工作,因为子作用域将继承对同一对象的引用。
http://jsfiddle.net/uurL65e5/1/<div ng-app="" ng-init="contact = {}">
<p ng-repeat="key in [1,2,3]">
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
</div>
你需要定义你的模型之前,通常你在你的控制器中定义你的模型但例如这个工作:
<div ng-app="">
<input type="text" ng-model="contact.name" />
<p ng-repeat="key in [1,2,3]">
<input type="text" ng-model="contact.name" />
{{contact}}
</p>
</div>
就用$parent
<div ng-app="">
<p ng-repeat="key in [1,2,3]">
<input type="text" ng-model="$parent.contact.name" />
{{contact}}
</p>
</div>
提琴- http://jsfiddle.net/ujmd0pc9/