javascript - 在 ng-repeat 中修改 Angular Scope 中的对象

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>循环内的值也设置为初始值。

当我修改输入中的值时，<p> ng-repeat block 内的值正确更新，但 <p> block2 中的标签更新失败。

为什么会这样？ ng-repeat 是否创建了自己的隔离范围？如果是这样，我怎样才能更新 Controller 级别的范围？另外，有人可以解释一下这种行为背后的想法及其提供的任何优势吗？

JSFiddle Showing the problem

Answer 1

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

出自 Angular 之父之一之口:

Always have a dot in ng-model

This is a great video regarding Angular Best Practices由 Angular 创作者 (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