javascript - AngularJS : ng-model binding in ng-repeat

Question

我正在循环一系列数据并想要动态绑定(bind)模型。我的问题是，当循环元素时，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 动态获取的。

我已经浏览了大量有关动态模型绑定(bind)的问题并浏览了文档，但没有运气。

任何人都可以阐明如何使所有三个字段使用相同的模型，以便它们能够很好地更新吗？

Answer 1

Angular 1.3 添加了一个 controllerAs 选项，该选项应该可以解决处理子作用域和作用域继承时的所有问题。

这被认为是当今的最佳实践。我创建了一个plunker为你。

  <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>

我强烈推荐阅读这篇文章:Understanding Scopes .

要了解新的 controllerAs 语法，您应该查看:Exploring Angular 1.3: Binding to Directive Controllers .