//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>