zoukankan      html  css  js  c++  java
  • angular的豆瓣分页

    //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>
  • 相关阅读:
    Powered by .NET Core 进展:验证高并发性能问题嫌疑犯 docker swarm团队
    暴风雨中的 online : .NET Core 版博客站点遭遇的高并发问题进展团队
    【网站公告】.NET Core 版博客站点第二次发布尝试团队
    【故障公告】发布 .NET Core 版博客站点引起大量 500 错误团队
    上周热点回顾(7.29-8.4)团队
    上周热点回顾(7.22-7.28)团队
    上周热点回顾(7.15-7.21)团队
    上周热点回顾(7.8-7.14)团队
    VMware虚拟机克隆Linux(CentOS)系统后找不到eth0网卡的问题(图文详解)
    Word在转PDF的过程中如何创建标签快速方便阅读(图文详解)
  • 原文地址:https://www.cnblogs.com/fdxxiaobai/p/7589373.html
Copyright © 2011-2022 走看看