angularjs 中实现 load more 功能
2015-01-05 14:25
483 查看
在UI 我们经常需要render 一些集合, 如果集合数据过多,那我们可能会采取分页的解决方案,本文是另外一种解决方法,就是当集合数量大于一定数量的时候显示一个 加载更多按钮,点击后,自动加载指定数量的数据。
1. 首先我们创建一个angularjs 页面,让他显示 10条记录:
Html page
Js file, 在这里我使用了filltext 这个api 来返回模拟数据
点击地址看预览效果: http://jsfiddle.net/vyhwb3t2/5/
2. 在html page 添加
3. 在controller 添加
ok, 大功告成,是不是非常简单。当然了,在实际情况中,我们还需要根据记录的情形,做些调整,比如显示剩余的记录条数,等数据都加载出来后,就隐藏掉load more 按钮等。
最后 完整代码: http://jsfiddle.net/vyhwb3t2/6/
预览图:
1. 首先我们创建一个angularjs 页面,让他显示 10条记录:
Html page
<div ng-app="APP"> <h2>angularjs page</h2> <div ng-controller="userController"> <div ng-repeat="user in users"> {{user.fname}} {{user.lname}} {{user.zip}} </div> </div> <hr /> </div>
Js file, 在这里我使用了filltext 这个api 来返回模拟数据
var APP = angular.module('APP', []). controller('userController', function ($scope,$http) { $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}"). success(function (data) { $scope.users = data }) });
点击地址看预览效果: http://jsfiddle.net/vyhwb3t2/5/
2. 在html page 添加
<div><button ng-click="loadMore()">load more</button></div>
3. 在controller 添加
$scope.loadMore = function(){ $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}"). success(function (data) { $scope.users = $scope.users.concat(data); } );
ok, 大功告成,是不是非常简单。当然了,在实际情况中,我们还需要根据记录的情形,做些调整,比如显示剩余的记录条数,等数据都加载出来后,就隐藏掉load more 按钮等。
最后 完整代码: http://jsfiddle.net/vyhwb3t2/6/
预览图:
相关文章推荐
- AngularJS:实现动态添加输入控件功能(转)
- AngularJS图片上传功能的实现
- AngularJS中实现用户访问的身份认证和表单验证功能
- AngularJS 实现的输入自动完成补充功能
- 基于Angularjs实现分页功能
- angularjs 实现排序功能
- ionic结合angularjs实现跳转到上个页面的功能
- AngularJS图片上传功能的实现
- angularJs实现信息数据提交功能
- AngularJS实现动态添加输入控件功能
- 使用angularjs实现下载文件的功能
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJS中实现用户访问的身份认证和表单验证功能
- AngularJS实现全选反选功能
- AngularJS:实现动态添加输入控件功能
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- angularJs 自定义指令实现星级评分功能
- AngularJS中的基础路由,通过ng-route实现基本的路由功能