ionic ngRepeat追加数据(加载更多,不需要重复渲染dom数据)
1)模版循环在之前的随笔中已经说过,使用挺简单的 http://www.cnblogs.com/tujia/p/6078217.html
简单来说就是控制器输入一个数据变量,模版里用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
完。
ionic ngRepeat追加数据(加载更多,不需要重复渲染dom数据)的更多相关文章
- 微信小程序 - (下拉)加载更多数据
注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'& ...
- listview下拉刷新和上拉加载更多的多种实现方案
listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局 android系统为listview提供了addfootview ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- iOS开发 XML解析和下拉刷新,上拉加载更多
iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...
- react-native 自定义 下拉刷新 / 上拉加载更多 组件
1.封装 Scroller 组件 /** * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { ...
- 微信小程序列表加载更多
概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...
- jQuery自动加载更多程序(转)
jQuery自动加载更多程序 1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...
- react-native ListView 封装 实现 下拉刷新/上拉加载更多
1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...
随机推荐
- Coreseek安装测试配置指南(转)
Sphinx--强大的开源全文检索引擎,Coreseek--免费开源的中文全文检索引擎 软件版本:coreseek-4.1 mmseg-3.2.14 autoconf-2.64 老版本的coresee ...
- MySQL修改root密码的各种方法整理(转)
整理了以下四种在MySQL中修改root密码的方法,可能对大家有所帮助! 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR ' ...
- Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库
Github资源:https://github.com/alibaba/weex-ui 预览 你可以通过飞猪.淘宝.天猫.Weex Playground 或者浏览器扫码体验 安装 npm i weex ...
- NPOI workbook.RemoveSheetAt(0); 删除sheet页 次序 sheettmpRequire.CopySheet("Require", true);
假如workbook的sheet页有多个 要删除第一个第二个 workbook.RemoveSheetAt(0); workbook.RemoveSheetAt(1); 这样写不行 这样写会删除第一个 ...
- mosquitto --用户配置 及权限管理
mosquitto中可以添加多个用户,只有使用用户名和密码登陆服务器才允许用户进行订阅与发布操作.可以说用户机制是mosquitto重要的安全机制,增强服务器的安全性.用户与权限配置需要修改3处地方: ...
- hdu 1022 Train Problem I(栈的应用+STL)
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- IT行业面试指导 计算机行业面试技巧 面试技巧
简历篇 简历是你的的第一张脸,简历写的是否合理,是否吸引人,将决定你能否赢得宝贵的面试机会,迈出第一步! l 姓名,性别,学历,居住地,工作年限,邮箱,手机号 l 填“现居住地”,不要填成“户籍所 ...
- Redis(十二):redis两种持久化方法对比分析
前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数 ...
- atitit.设计文档---操作日志的实现
atitit.设计文档---操作日志的实现 日志查询 1 ----mybatis 配置... 1 添加日志 1 日志查询 <a class="l-link" href=&q ...
- js操作cookie的一些注意项
这两天做购物车逻辑.依照通常的做法,把预购信息存放在cookie里,结果发生了非常多不可理喻的事情,完整的证明了我对cookie的无知. . . 这么多年.非常少用cookie,由于认为它不安全 ...