Tips for using Angularjs to make paging buttons

Understand angular's children's shoes certainly know that angular can bind data two-way, or one-way binding; the idea of this kind of binding allows us to knock out a lot of dom manipulation code, but is this binding only used on visible data?

, No. In the process of using angular, I found that using Ng-model can not only bind data, but also be used as a variable. In one-way bindings, we can use this skillfully to put the

The custom model is used as a variable, for example, when the user points to the page to take the first page of the function, we can define a $scope.currentpage= "", as a variable, the initial value of "";

Know that paging is after each operation to go to the database to display the corresponding data in the current page, and the current is the number of pages only the data returned from the database has, if you want to implement the current page as the first page when the previous button is not available, and then go to

Database fetch once? No after the last operation of the database, the currentpage is removed to put in this variable, until the next time to fetch data, this period of the current page is always stuck in the current page. Each time the user clicks on which button,

Just put the $scope.currentpage= "current page"; Because each time you display only one current page, add a highlight or other style to the current page, we just need to know that it's the current page, without having to loop

All the buttons, so take advantage of this, realize the user point that will show which, click on the previous page, next page, the current page button style, the last page, the first page button style is easy, in addition, we also

There are many things that can be done with this type of variable. The following is an example of using this variable, which can be replaced continuously and reset. Used as a parameter.

var studentmodule=angular.module ("Studentmodule", []);
Studentmodule.controller ("Studentcontroller", Function ($scope, $http) {
$scope. currentpage=1;
$scope. maxpage=0;
$scope. islastable= "No-drop";
$scope. isnextable= "Pointer";
$scope. searchtype= "S_name";
$scope. Createtable=function (data,curpage) {
$scope. Students=data;
Console.log (data);
var arr=[];
for (Var i=1;i<=data.maxpage;i++) {
Arr.push (i);
}
$scope. Page=arr;
$scope. Currentpage=curpage;
$scope. Maxpage=data.maxpage;
if ($scope. currentpage!=1) {
$scope. islastable= "Pointer";
}else{
$scope. islastable= "No-drop";
}
if ($scope. currentpage!= $scope. MaxPage) {
$scope. isnextable= "Pointer";
}else{
$scope. isnextable= "No-drop";
}
};
$scope. Searchstu=function (curpage,eachpage) {
$scope. maxpage=0;
$http. Post ("/students/searchstudent", {type: $scope. Searchtype,val: $scope. Searchval,curpage:curpage,eachpage: Eachpage})
. Success (function (data) {
$scope. CreateTable (Data,curpage);
})
};
$scope. Searchstu (1,5);
$scope. Tolastpage=function () {
if ($scope. currentpage!=1) {
$scope. Searchstu ($scope. currentpage-1,5);
}else{
return 0;
}
};
$scope. Tonextpage=function () {
if ($scope. currentpage!= $scope. MaxPage) {
$scope. Searchstu ($scope. currentpage+1,5);
}else{
return 0;
}
};
$scope. Deletestu=function (ID) {
$http. Get ("/students/deletestudent?id=" +id+ ""). Success (function (data) {
$scope. Searchstu (1,5);
})
};
$scope. Addstu=function () {
$http. Post ("/students/addstudent", {name: $scope. Addname,age: $scope. Addage,sex: $scope. Addsex})
. Success (function (data) {
$scope. Searchstu ($scope. maxpage,5);
})
};
$scope. Changestu=function () {
$http. Post ("/students/changestudent", {name: $scope. Configname,age: $scope. Configage,sex: $scope. configsex,id:$ Scope.configid}). Success (function (data) {
$scope. Searchstu ($scope. currentpage,5);
})
}
});

Tips for using Angularjs to make paging buttons