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

Question

我正在遍历一系列数据并希望动态绑定一个模型。我的问题是，当遍历元素时，似乎 Angular 为每次迭代创建了一个新范围，因此模型在三个迭代中不相同。

我已经为我的代码做了一个不起作用的简化示例；

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

中动态获取的

我查看了大量关于动态模型绑定的问题并查看了文档，但没有成功。

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

Answer 1

只需使用$parent

<div ng-app="">
    <p ng-repeat="key in [1,2,3]">
        <input type="text" ng-model="$parent.contact.name" />
        {{contact}}
    </p>
</div>

Fiddle - http://jsfiddle.net/ujmd0pc9/

Answer 2

如果您在创建子作用域之前将联系人指定为父作用域中的对象（我正在使用 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>

Answer 3

你需要先定义你的模型，通常你在你的控制器中定义你的模型，但是例如这个工作：

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

Answer 4

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.

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

AngularJS : ng-model binding in ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model