在阵列更新时,不会更新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 =你的初始化) 编辑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 $http.post()到同一台机器上的另一个端口
- YUM远程仓库以和NFS共享存储服务
- angularjs – 在模板中使用ng-repeat的Angular指令
- 如何合并vim命令行和状态行
- angularjs – 多个指令[myPopup,myDraggable]要求新的/隔离
- 如何在bash函数中打印换行符
- twitter-bootstrap – 两种形式并排
- 阻止使用AngularJs和Node.js / Express直接访问文件
- angularjs – 调用$location.search()后更新ui-router中的$
- angularjs – header-bar和class = bar-header之间的差异