全国服务热线:4008-888-888

行业新闻

小程序专属定制开发_angularjs使用directive完成分页

angularjs使用directive实现分页组件的示例       本篇文章主要介绍了angularjs使用directive实现分页组件的示例,具有一定的参考价值,有兴趣的可以了解一下。

效果:

输入框可任意输入,并会自动提交到该页

依赖项:

fontawesome,bootstrap

html:

 li ng-hide="currentPage = 1" 
 a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstPage()" 
 i /i 
 a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" prePage()" 
 i /i 
 /li 
 span 页码 /span 
 input type="text" ng-model="currentPage" /
 span ng-bind="totalPage" /span 
 /li 
 li ng-hide="currentPage = totalPage" 
 a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" nextPage()" 
 i /i 
 a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lastPage()" 
 i /i 
 /li 
 /ul 

css:

/* 分页 */
.page {
 margin: 15px 0;
 padding: 0;
 float: right;
.page li {
 list-style: none;
 float: left;
 height: 30px;
 line-height: 30px;
.page li input {
 padding: 3px 5px;
 height: 100%;
 width: 50px;
 border: none;
 background-color: #EAEEF1;
 text-align: center;
 margin-right: 10px;
.page li span {
 margin-right: 15px;
.page li a {
 text-decoration: none;
 outline: none;
 margin-right: 15px;

directive:

App.directive('paging', function() { // 分页
 return {
 restrict: 'A',
 replace: true,
 scope: {
 totalPage: '=totalPage',
 currentPage: '=currentPage',
 getData: ' getData'
 templateUrl: 'app/views/',
 controller: function($scope) {
 $scope.firstPage = function() { $scope.currentPage = 1; }
 $scope.lastPage = function() { $scope.currentPage = $scope.totalPage; }
 $scope.prePage = function() { $scope.currentPage--; }
 $scope.nextPage = function() { $scope.currentPage++; }
 $scope.$watch('currentPage', function(newVal, oldVal) {
 if(newVal != oldVal newVal) $scope.getData();

参数:

totalPage: 总页数, currentPage: 当前页, getData: 点击分页所触发的函数

用法:

controller:

$scope.current_page = 1; // 当前页
$scope.getData = function() {
 $scope.param.page = $scope.current_page;
 ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 这个ConnectApi 你大可不必关心,这是我封装的http函数
 var data = ConnectApi.data({ res: response, _index: index });
 $scope.data = data.data;
 $scope.totalpage = data.data.total_page; // 服务器端返回的总页数
$scope.getData(); // 获取数据的函数

html:

 div paging total-page="totalpage" current-page="current_page" get-data="getData()" /div 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服