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数据)的更多相关文章

  1. 微信小程序 - (下拉)加载更多数据

    注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'& ...

  2. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  3. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  4. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  5. iOS开发 XML解析和下拉刷新,上拉加载更多

    iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...

  6. react-native 自定义 下拉刷新 / 上拉加载更多 组件

    1.封装 Scroller 组件 /** * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { ...

  7. 微信小程序列表加载更多

    概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...

  8. jQuery自动加载更多程序(转)

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

  9. react-native ListView 封装 实现 下拉刷新/上拉加载更多

    1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...

随机推荐

  1. Ubuntu中类似任务管理器的东西?

    Ubuntu里面有没有类似windows中任务管理器的东西呢?怎么打开?谢谢!!!   ================================ 检举| 2009-02-01 16:50提问者 ...

  2. 【转帖】Dubbo:来自于阿里巴巴的分布式服务框架

    http://www.biaodianfu.com/dubbo.html Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被 ...

  3. POJ 2677 旅行商问题 双调dp或者费用流

    Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3408   Accepted: 1513 Description ...

  4. express 设置header解决跨域问题

    //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...

  5. AngularJS 中 Provider 的用法及区别

    在一个分层良好的 Angular 应用中,Controller 这一层应该很薄.也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里. 为此,理解 AngularJS 中的几个 ...

  6. Windows 10 开发人员预览版中的新增功能(转自 IT之家)

    Windows 10 开发人员预览版中的新增功能 在Win10预览版中安装工具与SDK后,即可着手创建Windows通用应用或先浏览目前的环境与此前相比都发生了什么变化. 应用建模 文件资源管理器: ...

  7. rip中的连续子网以及不连续子网

    RIPv1 RIPv2 距离矢量2 距离矢量 最大跳计数15 最大跳计数15 有类的 无类的 基于广播的    基于组播224.0.09 不支持VLSM 支持VLSM 无认证 允许MD5认证 不支持不 ...

  8. [转]James Bach:测试人员的角色

    [转]James Bach:测试人员的角色 2015-05-13 以前,我是个开发人员.我不喜欢这个工作,无尽的压力让我疲惫.我几乎从未感觉到自己的工作做得足够好.我从未有过真正的休息.如果我没做好, ...

  9. oracle ORA-12545:因目标主机或对象不存在

    解决方法: 1.首先从最基本的入手,这里打开计算机右击,选择管理 2. 找到里面的服务和应用程序,打开服务 3.找到: OracleOraDb11g_home1TNSListener OracleSe ...

  10. loadrunner录制成功但脚本内容为空,无任何代码//脚本中包含乱码

    使用loadrunner录制脚本,录制过程中也会显示“正在录制…”,并且有(XX个事件).但是脚本录制结束之后,脚本中没有任何内容,没有代码显示. 解决方法: 在脚本录制程序VU generator中 ...