angular的豆瓣分页

标签：ntp   .com   ons   url   数据   执行   注入   top   更新   

//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的豆瓣分页

标签：ntp   .com   ons   url   数据   执行   注入   top   更新   

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