ng-repeat不更新数组更新 [英] ng-repeat not updating on update of array

问题描述

我正在通过ng-repeat循环渲染数据.而且我希望它在更新数组时进行更新.从我阅读的内容来看，这应该会自动发生，但是这是行不通的.那我在做什么错了?

I'm rendering data through an ng-repeat cycle. And i would like it to update as I update the array. From what i read this should happen automatically however this is not working. So what am i doing wrong?

html:

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

控制器(此功能是通过ng-click在按钮上触发的):

Controller (this function is triggered on a button with ng-click):

$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显示该数组已正确更新，但是我视图中的表未更改.我不知道我在做什么错.

Console.log reveals that the array is updated correctly, however the table in my view does not change. I don't know what i'm doing wrong.

推荐答案

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

That's because you change the array reference in your method getDifferences.

为避免这种情况，我们点，例如使用"controller as"语法:

To avoid that, us dot, for example with "controller as" syntax:

<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

If you want to understand how scopes work, i would advice this article : https://github.com/angular/angular.js/wiki/Understanding-Scopes#ngRepeat

另一个解决方案可能是:

Another solution could be :

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

但是在此解决方案中，您需要在外部创建数组(并且仅创建一次):$scope.dataDifferenceArray = [];

but in this solution, you need to create the array outside (and only once) : $scope.dataDifferenceArray = [];

Edit2 :我的答案不是很清楚，让我们试着深入了解正在发生的事情:

My answer was not really clear, let's try to understand what is happening in deep:

问: 为什么ng-repeat仍然具有参考REFERENCE1?

您必须记住，模板中不仅只有1个作用域.

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

Eg: the ng-repeat directive create new scopes for each of the repeated elements, but we can still access to the parent scope in each child scope. Angular implemented this behavior using Prototype Inheritance: each child scope inherit the properties of its parent scope thanks to its prototype.

您可以通过检查子元素上的元素来进行实验，然后在控制台中输入:$($0).scope()(它将为您提供所选元素的范围，$0是所选元素(Chrome)) .现在，您可以看到$($0).scope().$parent和$($0).scope().__proto__中存在相同的对象，这是您的父作用域.

You can experiment how it is working by inspecting one on your child elements, then enter in the console: $($0).scope() (it will give you the scope of the selected element, $0 is the selected element (Chrome)). You can now see that there is the same object in $($0).scope().$parent and $($0).scope().__proto__, it is your parent scope.

但是原型继承存在一个问题:假设我们有A = {}; B = {C: 1}，如果A从B继承，则A.C == 1.但是，如果影响新值A.C = 2，则不会更改B，而仅更改A.

But there is one problem with prototype inheritance: Let's say we have A = {}; B = {C: 1}, if A inherits from B then A.C == 1. But if we affect a new value A.C = 2, we did not change B, only A.

使用当前范围作为this来计算角表达式.因此，如果我们有类似ng-click="dataDifferenceArray = []"的内容，则它等效于this.dataDifferenceArray = []，其中this是ng-click所在元素的范围.

Angular expressions are evaluated using the current scope as this. So if we have something like ng-click="dataDifferenceArray = []" it is equivalent to this.dataDifferenceArray = [] with this being the scope of the element where ng-click is.

当您使用 controller-as 时，此问题已解决，因为它将控制器注入到合并范围中，并且您将永远不会直接影响合并范围的属性.

This problem is solved when you are using controller-as because it injects the controller in the scope and you will never directly affect a property to the scope.

让我们回顾一下我们的示例:A = {}; B = {C: {D: 1}}，如果A继承自B，则A.C.D == 1.现在，即使影响新值A.C.D = 2，我们也更改了B.

Let's take back our example: A = {}; B = {C: {D: 1}}, if A inherits from B then A.C.D == 1. And now even if we affect a new value A.C.D = 2, we changed B also.

这篇关于ng-repeat不更新数组更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！