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

前端之家收集整理的这篇文章主要介绍了在阵列更新时,不会更新anglejs – ng-repeat前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我通过一个ng重复循环呈现数据。而且我希望在我更新数组时进行更新。从我读的这个应该会自动发生,但这不工作。那么我做错了什么?

HTML:

<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
    })
  }
}

Console.log显示数组正确更新,但是我的视图中的表不会更改。我不知道我做错了什么

这是因为您在方法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。

猜你在找的Angularjs相关文章