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显示数组正确更新,但是我的视图中的表不会更改。我不知道我做错了什么
为了避免这种情况,我们点,例如使用“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。