angular.js - angularJS ng-repeat

浏览:68日期:2023-01-29

问题描述

页面使用了ng-repeat生成了view。在controller里修改了ng-repeat的ng-model。view没有修改是什么么?

$scope.search = function(page){$scope.orData.page = page==0?1:page;$scope.$watch('orData', function(){ orderService.searchData($scope.orData).then(function(res){$scope.res = res.data;if ($scope.res != undefined) { if ($scope.res.page_items.length == 0) {alert('没有订单数据'); }else{$scope.tds = $scope.res.page_items;$timeout(function(){ console.log($scope.tds);}, 1000); };}else{ $scope.tds = ''; $('#orPaging').empty(); alert('订单号不能为非数字');}; });}); };//<tbody> <tr ng-repeat='td in tds'><!-- --><td>{{td.tid}}</td><td>{{td.created}}</td><td>{{td.buyer_nick}}</td><td>{{td.payment}}</td><td>{{td.shop_name}}</td><td>{{td.title}}</td><td>{{td.seller_memo}}</td><td>{{td.shipping_type}}</td><td>{{td.status}}</td><td>{{td.receiver_name}}</td><td><button type='button' data-tid='{{td.tid}}' ng-click='detail($event)'>查看</button></td> </tr></tbody>

第一次刷新$scope.tds,view是有改变的。但是再次给$scope.tds赋值,view就不再改变了。但是如果$scope.tds的长度有变,view又会变了,这是为什么呢?

问题解答

回答1:

首先我要说代码中的两个命名问题

'td in td'是什么鬼,Angular居然也可以正确地执行。建议区别这两个名称,比如改成td in tds。a和b这样命名确实可以,不过写控制器时是不是经常要想一想a是什么?哦,是$scope。为何不直接命名为$scope。

好了不啰嗦了,回答你的问题。在a.td = []的时候,a.td引用了另外一个数组,原有数组并未改变。而模板中绑定的是原有数组。这确实是AngularJS的一个坑,但你最好用push、pop、splice等来操作数组,如果你要替换整个数组,建议你这样搞:

javascripta.td.splice(0, a.td.length, {tid:'111', created:'222'}, {tid:'333', created:'444'});

更详细的AngularJS的数据绑定机制和更新过程,可以参考这篇文章:http://harttle.github.io/2015/06/06/angular-data-binding-and-digest.ht...

回答2:

javascript<body ng-app='scopeExample'><p ng-controller='MyController'> <p> <table> <tr ng-repeat='td in tds'><td>{{td.tid}}</td><td>{{td.created}}</td><td><button type='button' data-tid='{{td.tid}}' ng-click='detail($event)'>查看</button></td> </tr> </table> <button ng-click='change()'>button</button></p></p></body>sdApp.controller(’MyController’, [’$scope’, function($scope) { $scope.change = function(){ $scope.tds = [{tid:'321', created:'456'}, {tid:'abc', created:'def'}]; };}]);

试试看http://plnkr.co/edit/6tNYE0boiI6CXdKtckpa?p=preview

相关文章: