ng-repeat不更新数组

我正在通过ng-repeat循环呈现数据。 我希望它更新，因为我更新数组。 从我读这应该会自动发生，但这是行不通的。 那么我做错了什么？

HTML：

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

控制器（这个function是通过点击button触发的）：

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

Answer 1

这是因为你改变了方法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> [...] 

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

另一个解决scheme可能是

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

但是在这个解决scheme中，您需要在外部创build数组（并且只有一次）： $scope.dataDifferenceArray = [];

编辑2：我的回答不是很清楚，让我们试着了解深层的情况：

问： 为什么ng-repeat仍然有参考REFERENCE1？

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

例如： ng-repeat指令为每个重复元素创build新的作用域，但我们仍然可以访问每个子作用域中的父作用域。 Angular使用Prototypeinheritance来实现这种行为：由于其原型，每个子作用域inheritance了其父作用域的属性。

你可以通过检查你的子元素来testing它是如何工作的，然后在控制台中input： $($0).scope() （它会给你所选元素的范围， $0是所选元素（Chrome）） 。 你现在可以看到在$($0).scope().$parent和$($0).scope().__proto__中有相同的对象，这是你的父范围。

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

使用当前范围来评估angular度expression式。 所以如果我们有类似于ng-click="dataDifferenceArray = []"东西，它就等于this.dataDifferenceArray = [] ， this是ng-click所在的元素的范围。

当你使用控制器的时候，这个问题就解决了–因为它把控制器注入到了作用域中，你不会直接影响到作用域的属性。

让我们拿回我们的例子： A = {}; B = {C: {D: 1}} A = {}; B = {C: {D: 1}} ，如果A从Binheritance，那么ACD == 1 。 现在，即使我们影响一个新值ACD = 2 ，我们也改变了B

Answer 2

即使正确更新数组引用，我也遇到了同样的问题，ng-repeat没有呈现我的更改。 最后我通过调用$ scope来find解决scheme。

 $window.wizard.on("readySubmit", function () { var newArray = GenesisFactory.GetPermissionsFromTemplate(GenesisFactory.SecurityModules, true); $scope.NewSecurityProfileInstance.Permission.length = 0; newArray.forEach(function (entry) { $scope.NewSecurityProfileInstance.Permission.push(entry); }); $scope.$apply(); }); 

我希望这可以帮助。

Answer 3

我什么都没做，只是在推送元素后添加了这一行“ $ scope。$ apply（） ”，我就完成了。

Answer 4

实际上它看起来像你的数组被设置为在点击function内为空。 这将工作，如果你移动你的数组作用域的function。

例

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