//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>
时间: 2024-10-07 13:02:35