angularjs使用directive实现分页组件的示例

前端之家收集整理的这篇文章主要介绍了angularjs使用directive实现分页组件的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。

效果

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

依赖项:

fontawesome,bootstrap

html:

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:

分页 return { restrict: 'A',replace: true,scope: { totalPage: '=totalPage',currentPage: '=currentPage',getData: '&getData' },templateUrl: 'app/views/partials/paging.html',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:

函数 var data = ConnectApi.data({ res: response,_index: index }); $scope.data = data.data; $scope.totalpage = data.data.total_page; // 服务器端返回的总页数 } } $scope.getData(); // 获取数据的函数

html:

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

猜你在找的JavaScript相关文章