首页 > 其他 > 详细

angular的豆瓣分页

时间:2017-09-25 00:32:05      阅读:293      评论:0      收藏:0      [点我收藏+]
//console.log($routeParams.movieType);
//一共有多少页
console.log($routeParams.page);
//显示加载动画
$scope.isLoading = true;
// 每页有多少条数据 用大写字母来表示 固定的值
var COUNT = 5;
//通过路由参数 获取当前页 当前页
var curPage = ($routeParams.page || ‘1‘) - 0;//忽略就是第一页 -0 妆花为数字
// 暴露给视图使用
$scope.curPage = curPage;

// start值 :
// 需要根据页码(curPage) 以及页多少CONUT 计算start 值
// 第一页: 0 1 2 3 4
// 第二页: 5 6 7 8 9
// 第三页: 10 11 12 13 14
// ...
// 第 n页: ( curPage - 1 ) * COUNT

var startNum = (curPage -1 )*COUNT;

//分页功能
$scope.goPage = function (currentPage) {
//判断第一页不能再减,大于总页数不能再加
if(currentPage < 1 || currentPage > $scope.totalPage) {
return;
}



// currentPage 就表示当前的页码,就是要根据当前页码获取指定的数据
// 只需要让url 中的值发生改变,那么控制器中的代码就会重新执行

//只要重新执行就能够获取到当前页码并且发送请求获取数据!!!!

//需要另外注入一个服务$route
//通过修改路由参数来实现的分页功能
//调用 updateParams 方法,更新路由参数
$route.updateParams({page:currentPage})
}//page是路由的参数 参数变化了,控制器的代码就会重新执行
//那边的接口也是/coming_soon /in_theaters /top250
//根据不同的路由,请求不同的接口,获取相应的数据
JsonpSrv.jsonp(‘https://api.douban.com/v2/movie/‘ + $routeParams.movieType, {
start: startNum,
count: COUNT,
q:$routeParams.q
//q就传路由的q参数
}, function( data ) {
// 在回到函数中获取到 jsonp 返回的数据
console.log(data);
$scope.movieList = data;
//没有效果
//因为发送 jsonp 请求是一个异步操作,异步操作是不会被出发angular的双向绑定机制的
//需要手动触发angular的双向绑定机制,触发该机制,将数据的变化映射到视图中

//计算有多少页

$scope.totalPage = Math.ceil(data.total / COUNT) ;

//隐藏加载动画效果
$scope.isLoading = false;

$scope.$apply();
});
}])
//=================html部分====================//
<div class="paging">
<label>总共:{{ movieList.total }}条记录,第{{ curPage }}/{{ totalPage }}页;</label>
<!-- 加上disable类样式,表示按钮禁用状态 -->
<button class="prev" ng-class="{disable: curPage <= 1}" ng-click="goPage(curPage-1)">上一页</button>
<button class="next" ng-class="{disable: curPage >= totalPage}" ng-click="goPage(curPage -0 +1)">下一页</button>
</div>

angular的豆瓣分页

原文:http://www.cnblogs.com/fdxxiaobai/p/7589373.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!