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

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。

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

只需使用$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/

AngularJS：ng-repeat中的ng-model结合

4 个答案: