angularjs使用directive實現(xiàn)分頁組件的示例
更新時間：2017年02月07日 15:19:52 作者：冰果在線
本篇文章主要介紹了angularjs使用directive實現(xiàn)分頁組件的示例，具有一定的參考價值，有興趣的可以了解一下。
閑來沒事，分享下項目中自己寫的分頁組件。來不及了，直接上車。
效果：
輸入框可任意輸入，并會自動提交到該頁
依賴項：
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();
})
}
};
});
參數(shù)：
- totalPage: 總頁數(shù),
- currentPage: 當前頁,
- getData: 點擊分頁所觸發(fā)的函數(shù)
用法：
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函數(shù)
var data = ConnectApi.data({ res: response, _index: index });
$scope.data = data.data;
$scope.totalpage = data.data.total_page; // 服務器端返回的總頁數(shù)
}
}
$scope.getData(); // 獲取數(shù)據(jù)的函數(shù)
html:
<div paging total-page="totalpage" current-page="current_page" get-data="getData()"></div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Angularjs添加排序查詢功能的實例代碼,需要的朋友可以參考下2017-10-10
Angular2使用Angular CLI快速搭建工程（一）
這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄狽odeJs——入門必看攻略。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
ionic4+angular7+cordova上傳圖片功能的實例代碼
ionic是一個垮平臺開發(fā)框架，可通過web技術開發(fā)出多平臺的應用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
本文主要講解AngularJS Ajax的知識，這里提供詳細資料及代碼示例，幫助學習AngularJS的朋友,有需要的小伙伴可以參考下2016-08-08
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
任何時候，如果我們想要為請求添加全局功能，例如身份認證、錯誤處理等，在請求發(fā)送給服務器之前或服務器返回時對其進行攔截，是比較好的實現(xiàn)手段2015-12-12
這篇文章主要介紹了AngularJS ui-router刷新子頁面路由的方法，網(wǎng)上雖然有很多種方法，但是都不適合小編，今天小編給大家分享一個還不錯的方法，需要的朋友可以參考下2018-07-07
表單是最常用的一種組建。在Angular.js中，其實并沒有單獨的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現(xiàn)的2016-03-03