angularjs實現(xiàn)分頁和搜索功能
更新時間：2018年01月03日 08:38:56 作者：銀狐被占用
這篇文章主要介紹了angularjs實現(xiàn)分頁和搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了angularjs實現(xiàn)分頁和搜索展示的具體代碼，供大家參考，具體內容如下
話不多說,上代碼
<html class="no-js" ng-app="myApp">
<body ng-controller="mainController">
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in houses | limitTo:listsPerPage">
<td>{{item.c}}</td>
</tr>
</tbody>
</table>
<div class="am-cf">
共 {{dataNum}} 條記錄/當前第 {{currentPage+1}} 頁 共 {{pages}} 頁
<div class="am-fr">
<ul class="am-pagination">
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="prevPage()">«</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="nextPage()">»</a></li>
</ul>
</div>
</div>
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script>
</body>
</html>
javascript
<script>
var app = angular.module("myApp", []);
app.controller("mainController", function ($scope, $http) {
//測試數(shù)據(jù)
var $data = {"fs":[{"c":"張一"},{"c":"張二"},{"c":"張三"},{"c":"張四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]};
$scope.currentPage = 0;//設置當前頁是 0
$scope.listsPerPage = 3;//設置每頁顯示3個
//上一頁
$scope.prevPage = function(){
if($scope.currentPage > 0){
$scope.currentPage--;
}
}
//下一頁
$scope.nextPage = function(){
if ($scope.currentPage < $scope.pages-1){
$scope.currentPage++;
}
}
//監(jiān)聽搜索條件
$scope.$watch('search.c', function(){
$scope.currentPage = 0;
searchResult();
});
//監(jiān)聽翻頁
$scope.$watch('currentPage', function(){
searchResult();
});
//搜索或翻頁結果
function searchResult(){
var out = [];
if($scope.search){
angular.forEach($data.fs,function(k,v){
if(k.c.indexOf($scope.search.c)>-1){
out.push(k);
}
});
}
else{
out = $data.fs;
}
$scope.houses = out.slice($scope.currentPage*$scope.listsPerPage);
$scope.dataNum = out.length;
$scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage);
}
});
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎資料進行詳細介紹,并附代碼實例,有興趣的小伙伴可以參考下2016-08-08
不能不知道的10個angularjs英文學習網(wǎng)站
這篇文章主要為大家分享了10個大家不能不知道的angularjs英文網(wǎng)站，供大家學習，感興趣的小伙伴們可以參考一下2016-03-03
本文主要介紹AngularJS ng-class-odd 指令,這里對ng-class-odd基礎知識做了詳細整理,并有示例代碼和效果圖,學習AngularJS的同學可以參考下2016-08-08
AngularJS+Node.js實現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術的發(fā)展，如何快速構建高效、強大的動態(tài)網(wǎng)站成為很多人研究的熱點。該文將結合AngularJS和Node.js構建一個在線聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點。2015-08-08
AngularJS Toaster是一個 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
angular + express 實現(xiàn)websocket通信
最近需要實現(xiàn)一個功能,后端通過TCP協(xié)議連接雷達硬件的控制器,前端通過websocket連接后端,當控制器觸發(fā)消息的時候,把信息通知給所以前端,本文給的大家講解angular + express 實現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結合實例形式分析了AngularJS二維數(shù)組元素遍歷的相關操作技巧,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Angularjs實現(xiàn)多圖片上傳預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了AngularJS中的Promise詳細介紹及實例代碼的相關資料,Promise是一種模式，以同步操作的流程形式來操作異步事件，避免了層層嵌套，可以鏈式操作異步事件，需要的朋友可以參考下2016-12-12
angularjs功能在項目開發(fā)中經(jīng)常會用到，本文給大家總結了八種angularjs最常用的功能，感興趣的朋友一起學習吧2016-02-02