Question

我正在使用ng-repeat在HTML中创建一个表单，以从作用域中的对象生成表单元素。我还使用该对象生成ng-repeat之外的其他元素。

简化示例在HTML中如下所示：

<div ng-app="App">
  <div ng-controller="Ctrl">
      <div class="block1">
          <form ng-repeat="(key, value) in test">
              <label>{{key}}</label>
              <input ng-model="value" />
              <p>{{value}}</p>
          </form>
      </div>
      <div class="block2">
        <p>
          {{test.a}}
        </p>
        <p>
            {{test.b}}
        </p>
      </div>
  </div>
</div>

这在JS中：

angular.module('App', []);

function Ctrl($scope) {
    $scope.test = {
        a:"abc",
        b:"def"
    }
}

在此示例中，block2中的文本设置为test.a和test.b的初始值。循环内的输入值和<p>值也设置为初始值。

当我修改输入中的值时，ng-repeat块内的<p>值会正确更新，但block2中的<p>标记无法更新。

为什么这是行为？ ng-repeat是否创建了自己的隔离范围？如果是这样，我如何才能让控制器级别范围更新？此外，有人可以解释这种行为背后的想法及其提供的任何好处吗？

JSFiddle Showing the problem

Answer 1

ng-repeat为每个重复的项目创建子范围。因此，您尝试将原语传递给子范围，而不会创建对父级的引用。但是，传递对象时，会传递原始对象引用。

来自Angular的一位父亲的口中：

在ng-model中始终有一个点

由Angular创建者提供的{p> This is a great video regarding Angular Best Practices（2012/12/11）。转到第31分钟，了解具体情况的详细解释

将数据修改为对象数组：

$scope.test = [{ val:"abc",key:'a'}, {val:"def",key:'b'} ]

然后在转发器中：

<form ng-repeat="item in test">
  <label>{{item.key}}</label>
  <input ng-model="item.val" />
  <p>{{item.val}}</p>
</form>

的 DEMO

Answer 2

试试这个：

    angular.module('App', []);

function Ctrl($scope) {
    $scope.test = [
        {label:"a", value:"abc"},
        {label:"b", value:"def"}
    ]
}

和

<div ng-app="App">
  <div ng-controller="Ctrl">
      <div class="block1">
          <form ng-repeat="o in test">
              <label>{{o.label}}</label>
              <input ng-model="o.value" />
              <p>{{o.value}}</p>
          </form>
      </div>
      <div class="block2">
        <p>
          {{test[0].value}}
        </p>
        <p>
            {{test[1].value}}
        </p>
      </div>
  </div>
</div>

Angularjs使用对象通过引用传递的事实。因此，如果将对象传递给函数并更改函数内的对象，则外部对象也会更改。请查看此更新的JSFiddle

修改ng-repeat中Angular Scope内的对象

2 个答案: