时间:2021-05-28
闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。
效果:
输入框可任意输入,并会自动提交到该页
依赖项:
fontawesome,bootstrap
html:
<ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstPage()"> <i class="fa fa-step-backward"></i> </a> <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" prePage()"> <i class="fa fa-play fa-flip-horizontal"></i> </a> </li> <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 class="fa fa-play"></i> </a> <a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lastPage()"> <i class="fa fa-step-forward"></i> </a> </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/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(); }) } };});参数:
用法:
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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这里给大家分享的是一个angularJS中$attrs方法的使用示例:复制代码代码如下:无标题文档a_directive原始内容原始内容原始内容修改这里vara
AngularJS使用directive()方法类定义一个指令:.directive("name",function(){return{};})上面是定义一个指
AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码,创建可测试组件,然后将它们变成可重用组件。Direc
本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下:一、Html代码:二、tmp.
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:AngularJS中模板的使用,事件绑定以