在angularjs中如何實作分頁與搜尋功能
這篇文章主要介紹了angularjs實作分頁和搜尋功能，具有一定的參考價值，有興趣的夥伴們可以參考一下
本文實例為大家分享了angularjs實作分頁和搜尋展示的具體程式碼，供大家參考，具體內容如下
話不多說,上程式碼
<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>
<p class="am-cf">
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页
<p 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>
</p>
</p>
<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) {
//测试数据
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++;
}
}
//监听搜索条件
$scope.$watch('search.c', function(){
$scope.currentPage = 0;
searchResult();
});
//监听翻页
$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中如何實作分頁與搜尋功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
刪除 Windows 11 搜尋中的新聞和趨勢內容的方法
Oct 16, 2023 pm 08:13 PM
當您按一下Windows11中的搜尋欄位時，搜尋介面會自動展開。它在左側顯示最近程式的列表，在右側顯示Web內容。 Microsoft在那裡顯示新聞和趨勢內容。今天的支票宣傳了必應新的DALL-E3圖像生成功能、「與必應聊天龍」的提議、有關龍的更多資訊、來自網路部分的熱門新聞、遊戲建議和趨勢搜尋部分。整個項目清單與您在電腦上的活動無關。雖然一些用戶可能會喜歡查看新聞的能力，但所有這些都可以在其他地方大量獲得。其他人可能會直接或間接將其歸類為促銷甚至廣告。 Microsoft使用介面來推廣自己的內容，
PHP開發：如何實作表格資料排序與分頁功能
Sep 20, 2023 am 11:28 AM
PHP開發：如何實現表格資料排序和分頁功能在進行Web開發中，處理大量資料是一項常見的任務。對於需要展示大量資料的表格，通常需要實現資料排序和分頁功能，以提供良好的使用者體驗和最佳化系統效能。本文將介紹如何使用PHP實作表格資料的排序和分頁功能，並給出具體的程式碼範例。排序功能實作在表格中實作排序功能，可以讓使用者根據不同的欄位進行升序或降序排序。以下是一個實作表格
百度進階搜尋怎麼用
Feb 22, 2024 am 11:09 AM
百度高級搜尋怎麼用百度搜尋引擎是目前中國最常用的搜尋引擎之一，它提供了豐富的搜尋功能，其中之一就是進階搜尋。進階搜尋可以幫助使用者更精確地搜尋到所需的信息，提高搜尋效率。那麼，百度高級搜尋要怎麼使用呢？第一步，打開百度搜尋引擎首頁。首先，我們需要開啟一個百度的官方網站，也就是www.baidu.com。這是百度搜索的入口。第二步，點選進階搜尋按鈕。在百度搜尋框的右側，有
閒魚怎麼搜尋用戶
Feb 24, 2024 am 11:25 AM
閒魚怎麼搜尋用戶？在軟體閒魚中，我們可以直接在軟體裡面去找想要溝通的使用者。但卻不清楚該怎麼搜尋用戶。在搜尋後的用戶中查看即可。接下來就是小編為用戶帶來的搜尋用戶方式介紹的介紹，有興趣的用戶快來一起看看吧！閒魚怎麼搜尋用戶答：在搜尋後的用戶中查看詳情介紹：1、進入軟體，點選搜尋框。 2、輸入使用者名稱，點選搜尋。 3.再選擇搜尋框下的【用戶】，即可找到對應用戶了。
wps表格找不到正在搜尋的資料,請檢查搜尋選項位置
Mar 19, 2024 pm 10:13 PM
智能為主導的時代，辦公室軟體也普及開來，Wps表格由於它的靈活性被廣大的辦公室人員採用。在工作上要求我們不只是要學會簡單的表格製作和文字輸入，我們要掌握更多的操作技能，才能完成實際工作中的任務，有數據的報表，運用表格更方便更清楚更準確。今天我們帶給大家的課程是：wps表格找不到正在搜尋的資料,為什麼請檢查搜尋選項位置？ 1.先選取Excel表格，雙擊開啟。然後在該介面中，選取所有的儲存格。 2、然後在該介面中，點選頂部工具列裡「檔案」裡的「編輯」選項。 3、其次在該介面中，點選頂部工具列裡的“
如何使用 JavaScript 實作表格分頁功能？
Oct 20, 2023 pm 06:19 PM
如何使用JavaScript實作表格分頁功能？隨著網路的發展，越來越多的網站都會使用表格來展示數據。在某些資料量較大的情況下，需要將資料進行分頁展示，以提升使用者體驗。本文將介紹如何使用JavaScript實作表格分頁功能，並提供具體的程式碼範例。一、HTML結構首先，我們需要準備一個HTML結構來承載表格和分頁按鈕。我們可以使用<tab
手機淘寶怎麼搜尋店鋪 搜尋店舖名的方法
Mar 13, 2024 am 11:00 AM
手機淘寶app軟體內提供的商品好物非常多，隨時隨地想買就買，而且件件都是正品，每一件商品的價格標籤一清二楚，完全沒有任何的複雜操作，享受更加便捷的購物樂趣。隨心所欲自由搜尋選購，不同品類的商品板塊都是開放的，添加個人的收貨地址以及聯絡電話，方便快遞公司聯繫到你，實時查看最新的物流動態，那麼有些新人用戶第一次使用它，不知道如何搜尋商品，當然只需要在搜尋欄輸入關鍵字就能找到所有的商品結果，自由選購根本停不下來，現在小編在線詳細為手機淘寶用戶們帶來搜尋店鋪名的方法。 1.先打開手機淘寶app,
如何使用C++中的雜湊搜尋演算法
Sep 19, 2023 pm 02:49 PM
如何使用C++中的雜湊搜尋演算法雜湊（Hash）搜尋演算法是一種高效的查找和儲存技術，它將關鍵字透過雜湊函數轉換為固定長度的索引，然後利用這個索引在資料結構中進行搜尋。在C++中，我們可以透過使用標準函式庫中的雜湊容器和雜湊函數來實作哈希搜尋演算法。本文將介紹如何使用C++中的雜湊搜尋演算法，並提供具體的程式碼範例。引入頭檔和命名空間首先，在使用C++中的雜湊搜尋算
