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

【问题标题】：Modifying objects within Angular Scope inside ng-repeat在 ng-repeat 中修改 Angular Scope 内的对象
【发布时间】：2014-03-01 00:54:36
【问题描述】：

我正在使用 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> 值正确更新，但块2 中的<p> 标记无法更新。

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

JSFiddle Showing the problem

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

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

来自 Angular 之父之一的口中：

在 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

【讨论】：

感谢您对行为的清晰解释。我的用例要求我在外部范围内按名称引用“test”的属性，因此数组对我不起作用，但子对象似乎可以正常工作。
我的对象键是 UNIX 时代，所以这对我来说非常困难
@neaumusic 评论不清楚，如果需要帮助可以提出问题

【解决方案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

【讨论】：