在阵列更新时,不会更新anglejs – ng-repeat

<tr ng-repeat="data in dataDifferenceArray">
    <td>
      {{data.namE}}
    </td>
    <td>
      {{data.startData}}
    </td>
    <td>
      {{data.endData}}
    </td>
    <td>
      {{data.differenceData}}
    </td>
</tr>

$scope.getDifferences = function () {
  $scope.dataDifferenceArray = [];
  var i;
  for (i = 0; i < 20 ;i++) {
    $scope.dataDifferenceArray.push({
      name : 30,startData : 20,endData : 2,differenceData : 30
    })
  }
}

这是因为您在方法getDifferences中更改数组引用。

为了避免这种情况，我们点，例如使用“controller as”语法：

<div ng-controller="myController as c">
    [...]

    <tr ng-repeat="data in c.dataDifferenceArray">
        <td>
          {{data.namE}}
        </td>
        <td>
          {{data.startData}}
        </td>
        <td>
          {{data.endData}}
        </td>
        <td>
          {{data.differenceData}}
        </td>
    </tr>
    [...]

如果你想了解范围如何工作，我会建议这篇文章：https://github.com/angular/angular.js/wiki/Understanding-Scopes#ngRepeat

另一个解决办法可能是：

$scope.getDifferences = function () {
  $scope.dataDifferenceArray.length = 0; // here ----
  var i;
  for (i = 0; i < 20 ;i++) {
    $scope.dataDifferenceArray.push({
      name : 30,differenceData : 30
    })
  }
}

但在此解决方案中，您需要在外部创建数组(而且只能创建一个)：$ scope.dataDifferenceArray = [];

编辑：了解你的问题：

>开始时你有$ scope.dataDifferenceArray = VALUE(VALUE =你的初始化)
>你给ng重复这个dataDifferenceArray的引用(我们称之为REFERENCE1)。
>现在，如果你调用getDifferences，它将执行：$ scope.dataDifferenceArray = [];这相当于$ scope.dataDifferenceArray = new Array();.所以$ scope.dataDifferenceArray有一个新的引用(我们称之为REFERENCE2)。
> ng-repeat仍具有参考REFERENCE1(参见edit2)。所以不知道这些变化。
>如果我们使用一个点，ng-repeat将聚焦对象的属性dataDifferenceArray c。所以即使我们更改属性dataDifferenceArray的引用，这不再是ng-repeat的问题。

编辑2：我的答案不是很清楚，我们来试试看一下深入发生的事情：

问：为什么ng重复仍然有参考REFERENCE1？

你必须记住，你的模板中不仅有一个范围。

例如：ng-repeat指令为每个重复的元素创建新的范围，但是我们仍然可以访问每个子范围中的父范围。 Angular使用Prototype继承来实现此行为：由于其原型，每个子范围继承其父范围的属性。

您可以通过检查一个对您的子元素进行测试，然后进入控制台：$($ 0).scope()(它将给您所选元素的范围，$ 0是所选元素(ChromE)) 。你现在可以看到，$($ 0).scope()。$ parent和$($ 0).scope().__ proto__中有相同的对象，它是你的父范围。

但原型继承有一个问题：假设我们有A = {}; B = {C：1}，如果A从B继承，则A.C == 1.但是如果我们影响新值A.C = 2，则我们没有改变B，只有A

使用当前范围来评估角度表达式。所以如果我们有像ng-click =“dataDifferenceArray = []”这样的东西，就等于this.dataDifferenceArray = []，这是ng-click的元素的范围。

当您使用控制器时，这个问题解决了，因为它将控制器注入到作用域中，并且永远不会直接影响范围的属性。

我们回顾一下我们的例子：A = {}; B = {C：{D：1}}，如果A从B继承，则A.C.D == 1.现在即使我们影响新值A.C.D = 2，也改变了B。