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>
时间: 2024-07-30 16:23:21

angular的豆瓣分页的相关文章

Angular+Bootstrap实现分页(带省略号)

前言 前几天用Angularjs写一个后台管理界面时,需要写分页,自己懒得写于是想在网上搜索一个带省略号的插件,竟然没找到,那没办法就自己写吧 效果图 话不多说,直接上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href=

Angular+Angular-Ui实现分页(代码更加简单,更加容易懂哦)

前面写了个分页,但是个人认为只能玩玩,实际业务上的话代码太繁杂(笔者想走代码.性能精简化之路[不知道哪天才能成为高手~·YY一下无伤大雅]),逻辑上有点混乱.那么今天我们来看看另外一种只实现分页没有查询的例子吧(要想查询之后还分页的,请再看看i我前面写的那个分页文章,结合这篇文章,相信你很快就能搞定!).好了,先看效果: 采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootst

豆瓣 jsonp 请求数据 并分页

豆瓣分页 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Co

Asp.Net MVC 分页、检索、排序整体实现

原文:Asp.Net MVC 分页.检索.排序整体实现 很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功能不是高大全,但求一个清楚明白,也欢迎园友拍砖.前端是bootstrap3+jPaginate,后台基于membership.没什么难点. 先上效果图. 分页其实就是处理好 每页项目数.总项目数.总页数.当前页.为了方便复用,就先从仓库开始说起

商城作品解析

作品视频连接 先上作品,首先要说的是服务器,此服务器纯nodejs搭建,用了nodejs最火的框架express,后面一些插件用到再说吧~ 作品分为pc端和移动端,pc端又分为商品页和后台管理页面. 打开localhost:3000(nodejs默认3000端口),首先展示了页面,普通的商场格式,设计和布局什么的就不说了(比较渣,没有设计,凑合看) 然后是登陆页面,仿淘宝登陆,输入正确,登陆按钮会启用,后面还有几种登陆方式,到后面再说.登陆页面的账号信息是没有输入到前台,所以视频第一次是输错密码

angular 分页插件

这两天就要要到分页插件了,在家刚好边学习,边把分页插件写了 具体的github demo地址 好了,开始讲解demo html中关键的一句就是这个了 <div page-link conf="pagedata"></div> 继续看js中的 $scope.pagedata={ url:"aaa.json", pageSize:10, currentPage:1, returnValue:[], }这个就是conf的值通过directive的s

基于Bootstrap+angular的一个豆瓣电影app

1.搭建项目框架 npm初始化项目 npm init -y //按默认配置初始化项目 安装需要的第三方库 npm install bootstrap angular angular-route --save 新建一个index.html页面 引用 这三个依赖库 新建两个文件夹coming_soon in_theaters 然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件 最后项目文件的结构是这样 2.搭建首页样式 采用bootstrap http://v3

angular.js 分页

Angular.js+Bootstrap实现表格分页 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后分页显示. 1.表格是通过ng-repeat来展示的,代码如下: <table class="table table-bordered"> <

angular 分页插件的使用

html: <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemPerPage" previous-text="上一页" next-text="下一页" page-sizes="pageSizes" edit-page="editPage" ng-chan