在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"
    }
}

在这个例子中，在块2中的文本设置为初始值test.a和test.b。输入值和<p>循环内部的值也被设置为初始值。

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

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

JSFiddle显示问题

Answer 1

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

从Angular的一位父亲的嘴中：

ng-model中总是有一个点

这是 Angular创作者提供的
有关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](http://plnkr.co/edit/ymzbgHMdsOEkxmRjPBkG?p=preview)**