Then the first chapter "ANGULARJS Service $location and its function detailed", carries on the study
Section 2: Achieve paging display effect
Then stealth again, set the current URL information through the location setter method. In order to make the demo see better results, in this relatively complete example, I introduced the ANGULARJS technology, the transfer of data between nested controllers, scope inheritance, HTTP communication, internal link transfer variables, and so on.
First set up a homepage template
<!DOCTYPE html>
<html ng-app="turnPageApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.js"></script>
<script src="lib/angular-route.min.js"></script>
<style type="text/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
}
</style>
</head>
<body ng-controller="indexController">
<h1>AngularJS TurnPage By $location Service</h1>
<div ng-view></div>
<div class="turnPageButtonArea">
<button ng-click="previous()">Previous</button>
<button ng-click="next()">Next</button>
<input type="number" ng-model="currentPage" class="pageNum">
<button ng-click="goToPage()">Go</button>
<span class="totalPages">共 {{allPage}} 页</span>
</div>
</body>
</html>
View/student.html
<table cellspacing= "0" > <tr> <td class= "title" >ID</td> <td>{{student.id}}</td&
Gt </tr> <tr> <td class= "title" >Name</td> <td>{{student.name}}</td> </TR&G
T
<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> <ul> <li ng-repeat= "course in student.courses" &G T {{course}}</li> </ul> </td> </tr> </table> <style type= "text/css" > table
{border:solid 1px #000000;
margin:0px Auto;
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;
} </style>
Data/students.json
[
{
"id": 1,
"name": "Frank Li",
"sex": "Male",
"age": "A",
"courses": [
"HTML",
"] CSS ",
" Javascript ",
" Java ",
" PHP ",
" MySQL ",
" Ubuntu ",
" MongoDB ","
Nodejs ",
"Angularjs",
"Photoshop",
"less",
"Bootstrap"
]
},
{
"id": 2,
" Name ":" Cherry ","
Sex ":" female ",
" age ":" S ",
" courses ": [
" Anderson's Fairy Tales ",
" Pride and Prejudice ",
" Vanity Fair ",
" Oliver Twist "
]
},
{
" id ": 3,
" name ":" John Liu ",
" sex ":" Male ",
" age ":" I ",
" courses ": [
" Iology and Medical science ",
" pplied biology ",
" Medicine ","
Cell Biology "
]
},
{
" id ": 4,
" name ":" Lucy Mu ",
" sex ":" Female ",
" age ":" All ",
" courses ": [
" Introduction to ART ",
" sketch ",
" composition ",
" " Sculpture "
]
}
]
This is just the beginning, the default path in the Address bar is/1, so it directly displays the first student's information. The total number of page numbers can also be obtained.
Click on the Previous button after the effect. No more pages.
The effect of clicking the Next button when you are on page 4th. We can't turn the page back.
It's no problem to page pages in a page range!
Given the length, I don't show that the page number entered is out of range. The screenshot above is to enter the correct range of page numbers and click the Go button effect.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
