AngularJS:在ng-repeat中绑定ng-model

AngularJS : ng-model binding in ng-repeat

本文关键字：绑定 ng-model ng-repeat AngularJS      更新时间：2023-09-26

我正在遍历一系列数据，并希望动态绑定一个模型。我的问题是，当循环遍历元素时，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/

相关文章：