标签：
了解angular的童鞋肯定知道angular可以双向绑定数据，也可以单向绑定；这种绑定的理念让我们少敲不少dom操作的代码，但这种绑定仅仅使用在看得见的数据上么？
，no 。在使用angular的过程中，我发现： 利用ng-model不但可以绑定数据，还能当变量用。在单向绑定中，我们可以巧妙地利用这一点，把我们需要的scope里面的
自定义的model当成变量使用；比如在实现当用户点第几页就取第几页的功能呢，我们可以定义一个模型$scope.currentpage=“”,把它当成一个变量，初始值为“”；我们
知道分页是每次操作后都去数据库取相应的数据显示在当前页，而当前是第几页只有数据库返回来的数据中有，如果要实现当前页为第一页时上一页按钮不可用，难道又去
数据库取一次？no在上一次操作数据库后，就把currentpage取出来放在这个变量中，直到下一次取数据，这个期间当前页始终停留在当前页。每次用户点击哪个按钮，
就把$scope.currentpage=“当前页”；由于每次都只显示一个当前页，给当前页添加高亮效果或者其他样式，我们只需要知道，它是当前页就行了，而不需要在去循环
便历所有的按钮，所以利用这一点，实现用户点那个就显示哪个，点击上一页，下一页，当前页按钮的样式，最后一页，第一页按钮的样式就轻而易举了，除此之外，我们还
能利用这种类型的变量做很多事情。下面是一个使用这种变量的例子，这个变量可以被不停的替换，重置。当作参数使用。
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);
})
}
});
标签：
原文地址：http://www.cnblogs.com/qzj229/p/4985163.html
