在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 24, 2024 am 11:25 AM
闲鱼怎么搜索用户？在软件闲鱼中，我们可以直接在软件里面去找到想要沟通的用户。但却不清楚要怎么搜索用户。在搜索后的用户中查看即可。接下来就是小编为用户带来的搜索用户方式介绍的介绍，感兴趣的用户快来一起看看吧！闲鱼怎么搜索用户答：在搜索后的用户中查看详情介绍：1、进入软件，点击搜索框。2、输入用户名称，点击搜索。3、再选择搜索框下的【用户】，即可找到对应用户了。
百度高级搜索怎么用
Feb 22, 2024 am 11:09 AM
百度高级搜索怎么用百度搜索引擎是目前中国最常用的搜索引擎之一，它提供了丰富的搜索功能，其中之一就是高级搜索。高级搜索可以帮助用户更精确地搜索到所需的信息，提高搜索效率。那么，百度高级搜索怎么使用呢？第一步，打开百度搜索引擎首页。首先，我们需要打开百度的官方网站，即www.baidu.com。这是百度搜索的入口。第二步，点击高级搜索按钮。在百度搜索框的右侧，有
wps表格找不到正在搜索的数据,请检查搜索选项位置
Mar 19, 2024 pm 10:13 PM
智能为主导的时代，办公软件也普及开来，Wps表格由于它的灵活性被广大的办公人员采用。在工作中要求我们不只是要学会简单的表格制作和文字录入，我们要掌握更多的操作技能，才能完成实际工作中的任务，有数据的报表，运用表格更方便更清楚更准确。今天我们给大家带来的课程是：wps表格找不到正在搜索的数据,为什么请检查搜索选项位置？1、首先选中Excel表格，双击打开。然后在该界面中，选中所有的单元格。 2、然后在该界面中，点击顶部工具栏里“文件”里的“编辑”选项。 3、其次在该界面中，点击顶部工具栏里的“
手机淘宝怎么搜索店铺 搜索店铺名的方法
Mar 13, 2024 am 11:00 AM
手机淘宝app软件内提供的商品好物非常多，随时随地想买就买，而且件件都是正品，每一件商品的价格标签一清二楚，完全没有任何的复杂操作，享受更加便捷的购物乐趣。随心所欲自由搜索选购，不同品类的商品板块都是开放的，添加个人的收货地址以及联系电话，方便快递公司联系到你，实时查看最新的物流动态，那么有些新人用户第一次使用它，不知道如何搜索商品，当然只需要在搜索栏输入关键词就能找到所有的商品结果，自由选购根本停不下来，现在小编在线详细为手机淘宝用户们带来搜索店铺名的方法。 1.首先打开手机淘宝app,
如何使用 JavaScript 实现表格分页功能？
Oct 20, 2023 pm 06:19 PM
如何使用JavaScript实现表格分页功能？随着互联网的发展，越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下，需要将数据进行分页展示，以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能，并提供具体的代码示例。一、HTML结构首先，我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab
如何使用C++中的哈希搜索算法
Sep 19, 2023 pm 02:49 PM
如何使用C++中的哈希搜索算法哈希（Hash）搜索算法是一种高效的查找和存储技术，它将关键字通过哈希函数转化为一个固定长度的索引，然后利用这个索引在数据结构中进行搜索。在C++中，我们可以通过使用标准库中的哈希容器和哈希函数来实现哈希搜索算法。本文将介绍如何使用C++中的哈希搜索算法，并提供具体的代码示例。引入头文件和命名空间首先，在使用C++中的哈希搜索算
