您的位置:首页
ionic ngRepeat追加数据(加载更多,不需要重复渲染dom数据)
2016-12-09 10:21
423 查看
1)模版循环在之前的随笔中已经说过,使用挺简单的 http://www.cnblogs.com/tujia/p/6078217.html
简单来说就是控制器输入一个数据变量,模版里用ng-repeat属性来循环就可以了
2)现在问题来了,循环是可以,但我怎么追加呢?(异步更多)
以上面的例子为例,循环的变量是lists,是不是只要动态改变lists的值(追加lists的值),angular就会改变dom了呢?说做就做,举个粟子:
多余的东西是我练习项目里的,不用管,关键的地方在这里
3)其实就按上面的代码已经基本可以实现追加的功能需求了,但还有一个问题
你可能会发现,虽然上面是所加的lists的值,但赋值给$scope时,它并不是所加,而是重新遍历渲染过一遍所以dom数据,请看下图
4)那怎么解决就个问题???
ng-repeat 其实还有一个提高效率写法,只要加一个track by $index就可以了,写法是这样的
然后你刷新测试一下就会发现追加数据就会好使了!!!(不会重复渲染所有数据)
更详细track by 用法看这里:https://docs.angularjs.org/api/ng/directive/ngRepeat
完。
简单来说就是控制器输入一个数据变量,模版里用ng-repeat属性来循环就可以了
<ion-list> <ion-item ng-repeat="item in lists"> Hello, {{item.uname}}! </ion-item> </ion-list>
2)现在问题来了,循环是可以,但我怎么追加呢?(异步更多)
以上面的例子为例,循环的变量是lists,是不是只要动态改变lists的值(追加lists的值),angular就会改变dom了呢?说做就做,举个粟子:
function get_goods_list(arguments,params,_callback){ var $scope = arguments[0]; var $http = arguments[1]; var $ionicLoading = arguments[3]; params.method = 'b2c.goods.search_properties_goods'; http_request($http, $ionicLoading, params, function(res){ if(res.pager.current=='1'){ $scope.lists = []; $scope.title = document.title = res.title; } var _count = $scope.lists.length; var len = res.lists.length; //无数据,退出 if(len<1) return false; for(var i=0,len=res.lists.length; i<len; i++){ $scope.lists[_count+i] = res.lists[i]; } if(_callback) _callback(res); }) }
多余的东西是我练习项目里的,不用管,关键的地方在这里
var _count = $scope.lists.length; var len = res.lists.length; //无数据,退出 if(len<1) return false; for(var i=0,len=res.lists.length; i<len; i++){ $scope.lists[_count+i] = res.lists[i]; }
3)其实就按上面的代码已经基本可以实现追加的功能需求了,但还有一个问题
你可能会发现,虽然上面是所加的lists的值,但赋值给$scope时,它并不是所加,而是重新遍历渲染过一遍所以dom数据,请看下图
4)那怎么解决就个问题???
ng-repeat 其实还有一个提高效率写法,只要加一个track by $index就可以了,写法是这样的
<ion-list> <ion-item ng-repeat="item in lists track by $index"> Hello, {{item.uname}}! </ion-item> </ion-list>
然后你刷新测试一下就会发现追加数据就会好使了!!!(不会重复渲染所有数据)
更详细track by 用法看这里:https://docs.angularjs.org/api/ng/directive/ngRepeat
完。
相关文章推荐
- 如何知道ng-repeat循环的dom已经渲染完成
- h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间
- Angularjs的ng-repeat中去除重复的数据
- 使用ng-repeat循环数据重新渲染问题
- 详解vue模拟加载更多功能(数据追加)
- ng-repeat指令中使用track by子语句解决数据重复遍历的错误
- AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
- angular中ng-repeat报错(数据中有重复)angularjs[ngRepeat:dupes]
- angular ng-repeat中DOM的重新渲染机制(项目中遇到问题)
- ng-repeat中DOM的重新渲染机制
- Angularjs的ng-repeat中去除重复数据的方法
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
- (十二)ng-repeat指令中使用track by子语句解决重复数据遍历的错误
- 50个Android开发技巧(02 延迟加载和避免重复渲染视图)
- ListView下面添加一个按钮(更多)加载更多数据
- 详解iPhone Tableview分批显示数据 实现点击加载更多
- 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
- Not in 改写左连接不需要关注连接列是否重复数据
- windswaterflow 瀑布流 加载多次重复数据