AngularJs实现分页功能不带省略号的代码
angularJs的分页重点体现在对过滤器的使用。这个过滤器也并不复杂。
首先上html代码：
<!DOCTYPEhtml>
<htmlng-app="demoApp">
<head>
<metacharset="utf-">
<metaname="viewport"content="width=device-width">
<title>demo</title>
<linkrel="stylesheet"href="demo.css">
</head>
<body>
<divng-controller="demoCtrl">
<div>
<ul>
<ling-repeat="sentencesindemoLists[].name|paging:currentPage*listsPerPage|limitTo:listsPerPage">{{sentences}}</li><!--ng-repeat动态生成模拟的数据-->
</ul>
</div>
<div>
<aclass="stepprevLink"ng-click="prevPage()">上一页</a>
<ang-class="{true:'currentStep',false:'step'}[num==currentPage]"ng-repeat="numinpageNum"ng-click="setPage(num)">{{num+}}</a><!--ng-repeat动态生成页码-->
<aclass="stepnextLink"ng-click="nextPage()">下一页</a>
</div>
</div>
<scriptsrc="angular.min.js"></script><!--引入你的angularJs文件-->
<scriptsrc="demo.js"></script>
</body>
</html>
这里面用到了ng-class，当前页currentPage等于页码num时，显示currentStep的样式，不等于时显示step的样式。
重点代码在13行，ng-repeat模拟数据的时候加了过滤器，过滤器名字叫paging和一个angular自带的过滤limitTo。
然后是css代码，没有什么可说的，主要是调样式。其中记得加上ng-class里的两个样式。
ul>li{
list-style:none;
width:px;
height:px;
border:pxsolid#CAF;
margin-bottom:px;
padding-left:px;
}
.nextLink,.prevLink{
font-size:px;
line-height:px;
height:px;
border:solidpx#aaa;
color:#;
padding:px;
margin:px;
list-style:none;
background:#fff;
float:left;
cursor:pointer;
}
a.prevLink:hover,a.nextLink:hover{
background:#aaa!important;
color:#fff!important;
cursor:pointer;
}
.step{
display:block;
line-height:px;
height:px;
border:solidpx#aaa;
color:#;
background:#fff;
padding:px;
font-size:px;
float:left;
margin:px;
list-style:none;
cursor:pointer;
}
.currentStep{
border-color:#fff;
padding:px;
color:#f;
font-weight:bold;
float:left;
display:block;
line-height:px;
height:px;
padding:px;
font-size:px;
float:left;
margin:px;
list-style:none;
cursor:pointer;
}
最后就是js了
vardemoApp=angular.module('demoApp',[]);
demoApp.filter('paging',function(){//paging过滤器
returnfunction(lists,start){//两个参数lists是在html里你ng-repeat的原始数据：
//start也就是paging后面传的参数，即currentPage*listsPerPage
returnlists.slice(start);//将原始数据按照start分割
};
});
demoApp.controller('demoCtrl',['$scope',function($scope){//页面控制器
$scope.demoLists=[//模拟数据
{name:['helloworld','helloworldagain',
'whyisayhellowrold',
'idontknowthereason',
'maybebecauseiamadeveloper.',
'thankyouforreadingthis',
'whyisaythankyou',
'causethisstuffhasnothingtodowithyourangularJsstudying',
'thesearejustdemosentences.',
'Donothaveanyspecialmeanings.',
'andyoustilltaketimetoreadthisrowbyrow',
'whatcouldisay?',
'okay.maybeyouwannalenrnhowjsonworks.']
}
];
$scope.dataNum=$scope.demoLists[].name.length;//获得数据总个数
$scope.pages=Math.ceil($scope.dataNum/);//按照每页显示个数据，得到总页数
$scope.pageNum=[];//生成页码，在html里ng-repeat出来
for(vari=;i<$scope.pages;i++){
$scope.pageNum.push(i);
}
$scope.currentPage=;//设置当前页是
$scope.listsPerPage=;//设置每页显示个
$scope.setPage=function(num){//当点击页码数字时执行的函数
$scope.currentPage=num;//将当前页设置为页码数
}
$scope.prevPage=function(){//点击上一页执行的函数
if($scope.currentPage>){
$scope.currentPage--;
}
}
$scope.nextPage=function(){//点击下一页执行的函数
if($scope.currentPage<$scope.pages-){
$scope.currentPage++;
}
}
}]);
这中间要说一下，你生成的pageNum是从0开始的，但真正的页码都是从一开始，所以这也就是html里18行是num+1的缘故。
以上内容是小编给大家介绍的AngularJs实现分页功能不带省略号的代码，希望能够帮助到大家，如果大家想了解更多有关angularjs的知识敬请关注毛票票网站！