AngularJS实现分页显示数据库信息_AngularJS_脚本之家

     .turnPageButtonArea { background-color: #f07a13; width: 500px; height: 30px; line-height: 30px; text-align: center; margin: 10px auto; padding: 20px; } button { margin-right: 20px; width: 100px; height: 30px; font-size: 15px; } .pageNum { width: 50px; height: 23px; text-align: center; } body { font-family: 微软雅黑; } h1 { text-align: center; } .totalPages { color: #ffffff } AngularJS TurnPage By $location Service Previous Next  Go 共 {{allPage}} 页 //实例化用户自己的ngApp对象。这里因为用到了路由机制,所以在依赖注入中写入ngRoute这个模块 var turnPageApp = angular.module('turnPageApp', ['ngRoute']); /* 设置对于不同的url,启用不同的模板和控制器。 本例由于只用到了一个模板,所以遇到的路由的情况就只有一种,即 “/id” */ turnPageApp.config(['$routeProvider', function  { $routeProvider .when('/:id', { //这里的id其实表示的是翻页中的页码 templateUrl: 'view/student.html', controller: 'StudentController' }) .otherwise;//如果没法匹配到url时,直接跳转会第一页 }]); //注册父控制器indexController,这里由于需要将模板里的子控制器的值传递给父控制器,所以需要这个根域$rootScope来帮忙,在返回函数里需要传入这个根域对象。 //而且,本例是基于对url的操作来实现翻页,所以这个内建的$location服务是一定要传入的 turnPageApp.controller('indexController', function ($rootScope, $scope, $location) { //给父scope定义函数 $scope.previous = function () { //从浏览器的地址栏获取路径,即turnPage.html#/1中井号后面的内容:“ /1 ” //然后通过JavaScript的silce函数取出斜杠后面的字符,并转换成数字。 //加 1 还是减 1 要看是在定义的是哪个按钮的功能函数了 var pageNum = parseInt.slice - 1; //页码是有限的,需要做一些判断 if  { alert('This is the first page'); } else { //如果现在没有处在第一页,则path属性减去1,即向前翻一页。这个翻页的效果就是通过设置url中的path来实现 $location.path; } }; //和上面的previous()函数类似 $scope.next = function () { var pageNum = parseInt.slice + 1; if (pageNum > $rootScope.allPage) { alert('This is the last page'); } else { $location.path; } }; //这是一个直接跳转到那个页码的函数,在判断的地方稍微繁琐些 $scope.goToPage = function () { //从input输入框绑定的currentPage变量中获取用户输入的值 var pageNum = $scope.currentPage; //为了程序的严密和可用性,需要先判断输入是否为空 if (pageNum == null || pageNum == undefined || pageNum == "") { alert("try to input a page number"); //如果不是空,再判断用户输入的页码是否超出了页码的范围 //这里出现了$rootScope这个根域及其属性allPage,该属性的值是页码的总数 } else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) { alert("The page number is beyond the scope of the number of the students") } else { //如果都没问题了,则修改URL,此时angularJS会捕捉地址栏的变化,然后跳转,细节将在下面讲解。 $location.path; //这里实在注册嵌入到首页的模板页的控制器。 //由于子域和父域的通信需要借助根域,所以在依赖中传入$rootScope对象 //$scope是模板自己的作用域,它继承了父控制器indexController生成的作用域 //在模板中需要与服务端的文件进行交互,所以需要引入内建的$http服务。为了控制实例的复杂度,我直接写了一个json文件,做了一些假数据。 //这里$routeParams是一个对象,这个对象里有一个属性,就是我们之前在config,这个id是个变量,地址栏里的path是几,这个id就是几。id的值需要通过$routeParams这个对象来取得。 turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) { //$http的get方法与远程的一个文件发出请求,如果成功,则执行一个回调函数,函数的参数就是从远端文件里拿到的数据,这个数据可以是个数组,也可以是个对象。 //那么我们这次拿到的是一个json数组,数组的元素是一个个的对象。 $http.get.success { //把数组里的一个元素取出来,赋给模板子作用域对象的属性上。由于json数组的id是从1开始写的,而返回的数据是个数组,下标从0开始,所以要减去1 $scope.student = data[$routeParams.id - 1]; //这里顺便把这个数组的元素个数取出来,每个元素就代表以页。那么元素总个数就代表共有多少页。 //注意要传递给最高级别的根域对象,因为子域能覆写父域的同名属性;子域如果没有直接赋值,那么子域的同名属性将继承父域同名属性的值; /*我们在回到本文件代码上面的“共 {{allPage}} 页”处,这个就是根域$rootScope的属性。而且在父控制器中并没有特别的赋值。而这个span元素恰好就在父控制器的作用域内,那么这个元素里的allPage属性就会继承父作用域的同名属性allPage的值,也就间接的显示出了总页数。 */ $rootScope.allPage = data.length; }); }]);

处于第4页时,点击Next按钮时的效果。不能再往后翻页了。

view/student.html

在属性为ngView的div元素中,将嵌入其他HTML的模板。

上面的index.html是之前两个例子的,可以不去理会。

Section 2:实现分页显示效果

[ { "id": 1, "name": "Frank Li", "sex": "male", "age": "30", "courses": [ "HTML", "CSS", "Javascript", "Java", "PHP", "MySQL", "Ubuntu", "MongoDB", "NodeJS", "AngularJS", "Photoshop", "LESS", "Bootstrap" ] }, { "id": 2, "name": "Cherry", "sex": "female", "age": "27", "courses": [ "Anderson's Fairy Tales", "Pride and Prejudice", "Vanity Fair", "Oliver Twist" ] }, { "id": 3, "name": "John Liu", "sex": "male", "age": "29", "courses": [ "iology and medical science", "pplied biology", "medicine", "cell biology" ] }, { "id": 4, "name": "Lucy Mu", "sex": "female", "age": "22", "courses": [ "Introduction to ART ", "sketch", "Composition", "sculpture" ] }]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

然后在首页的元素里设置了一些ngApp和controller。

这是刚开始的样子,地址栏中默认的path是/1,所以直接显示了第一个学生的信息。页码总数也能获得。

turnPage.html

data/students.json

那么再隐身一下,通过location的setter方法设置当前的url信息。在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术、嵌套的控制器之间传递数据、scope的继承、
http通信、内链接传递变量等。

这三个按钮里面都有一个ngClick属性,表示当用户点击按钮后,便会执行对应的函数。

紧接着下方,我摆放了三个按钮,其中前两个是上一页和下一页的翻页按钮;一个输入框可供用户输入他想跳转到的页码,旁边的按钮作为页码的提交按钮,点击后页面立即翻页。

在讲解angularJS的js代码前,先截图看看文件的目录结构。

在页码范围内翻页是没有问题的!

为了简单期间,我把script脚本都放在了turnPage.html文件的下方了。下面就是全这个文件的完整代码:

点击了Previous按钮后的效果。不能再往前翻页了

ID {{student.id}}
Name {{student.name}}
Sex {{student.sex}}
Age {{student.age}}
Courses
  • {{course}}

鉴于篇幅,我就不演示输入的页码超出范围的情况了。上面的截图是输入正确范围的页码,点击Go按钮的效果。

接着第一篇《》AngularJS内建服务$location及其功能详解》,进行学习

通过一些简单的CSS样式将页面的布局修饰了一下。

     .turnPageButtonArea { background-color: #f07a13; width: 500px; height: 30px; line-height: 30px; text-align: center; margin: 10px auto; padding: 20px; } button { margin-right: 20px; width: 100px; height: 30px; font-size: 15px; } .pageNum { width: 50px; height: 23px; text-align: center; } body { font-family: 微软雅黑; } h1 { text-align: center; } .totalPages { color: #ffffff } AngularJS TurnPage By $location Service Previous Next  Go 共 {{allPage}} 页

发表评论

电子邮件地址不会被公开。 必填项已用*标注