频道导航

AngularJS实现分页显示数据库信息

2019-01-05 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS实现分页显示数据库信息，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

Section 2：

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

首先建立一个首页模板

AngularJS TurnPage By $location Service

IoUs()">PrevIoUs

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

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

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

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

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

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

这里写图片描述

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

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

turnPage.html

Meta charset="UTF-8"> AngularJS TurnPage By $location Service

IoUs()">PrevIoUs

view/student.html

<div class="jb51code">
<pre class="brush:xhtml;">
<table cellspacing="0">
<tr>
<td class="title">ID</td>
<td>{{student.id}}</td>
</tr>
<tr>
<td class="title">Name</td>
<td>{{student.name}}</td>
</tr>
<tr>
<td class="title">Sex</td>
<td>{{student.sex}}</td>
</tr>
<tr>
<td class="title">Age</td>
<td>{{student.age}}</td>
</tr>
<tr>
<td class="title">Courses</td>
<td>

td {
padding: 10px 10px 10px 20px;
margin: 0px;
border: solid 1px #000000;
}

tr {
margin: 0px;
padding: 0px;

}

.title {
background-color: #207ef0;
text-align: center;
color: #ffffff;
}

ul {
list-style: none;
margin: 0px;
padding: 0px;
}

li {
float: left;
margin: 10px;
}

data/students.json

<div class="jb51code">
<pre class="brush:js;">
[
{
"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","age": "29","courses": [
"iology and medical science","pplied biology","medicine","cell biology"
]
},{
"id": 4,"name": "Lucy Mu","age": "22","courses": [
"Introduction to ART ","sketch","Composition","sculpture"
]
}
]