使用Angularjs过滤器如何实现动态搜索
这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下
本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考，具体如下：
利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>www.jb51.net AngularJS过滤器测试</title>
</head>
<body ng-controller="app">
<table>
<tr>
<td ng-click="sort('name')">姓名</td>
<td ng-click="sort('age')">年龄</td>
</tr>
<tr ng-repeat="arr1 in arr1">
<td>{{arr1.name}}</td>
<td>{{arr1.age}}</td>
</tr>
</table>
<input id="wei" type="text" ng-focus="concentrate()" >
<input type="button" ng-click="search()" value="搜索">
</body>
<script src="angular.min.js"></script>
<script src="jquery.js"></script>
<script>
// var wei = document.getElementById("wei");
// console.log(wei);
// setTimeout(function(){
// $("#wei").attr("disabled",false);
// },3000);
var m=angular.module("myApp",[]);
m.controller("app",["$scope","$filter",function($scope,$filter){
var arr=[
{"name":"猪","age":20},
{"name":"小猪","age":23},
{"name":"大猫","age":227},
{"name":"老虎","age":29},
{"name":"中虎","age":29},
{"name":"老虎","age":39},
{"name":"老猫","age":47},
{"name":"熊猫","age":29},
{"name":"树懒","age":27},
{"name":"狮子","age":59}
];
$scope.arr1=arr;
//实现查询功能
var isopen=true;
$scope.sort=function(str){
$scope.arr1=$filter("orderBy")($scope.arr1,str,isopen);
isopen=!isopen;
//console.log(isopen);
};
$scope.concentrate=function(){
console.log("已聚焦");
}
//实现查询功能
$scope.search=function(){
console.log(11);
$scope.arr1=$filter("filter")(arr,document.getElementById("wei").value);
}
}]);
</script>
</html>运行效果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是使用Angularjs过滤器如何实现动态搜索的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在Windows 11/10中按拍摄日期对照片进行排序
Feb 19, 2024 pm 08:45 PM
本文将介绍如何在Windows11/10中根据拍摄日期对图片进行排序，同时探讨如果Windows未按日期排序图片应该如何处理。在Windows系统中，合理整理照片对于方便查找图像文件至关重要。用户可以根据不同的排序方式（如日期、大小和名称）来管理包含照片的文件夹。此外，还可以根据需要设置升序或降序排列，以便更灵活地组织文件。如何在Windows11/10中按拍摄日期对照片进行排序要按在Windows中拍摄的日期对照片进行排序，请执行以下步骤：打开图片、桌面或放置照片的任何文件夹在功能区菜单中，单
如何在Outlook中按发件人、主题、日期、类别、大小对电子邮件进行排序
Feb 19, 2024 am 10:48 AM
Outlook提供了许多设置和功能，可帮助您更有效地管理工作。其中之一是排序选项，可让您根据需要对电子邮件进行分类。在这个教程中，我们将学习如何利用Outlook的排序功能，根据发件人、主题、日期、类别或大小等条件对电子邮件进行整理。这将让您更轻松地处理和查找重要信息，提高工作效率。MicrosoftOutlook是一个功能强大的应用程序，可以方便地集中管理您的电子邮件和日历安排。您可以轻松地发送、接收和组织电子邮件，而内置的日历功能也让您能够方便地跟踪您即将面临的活动和约会。如何在Outloo
将VirtualBox固定磁盘转换为动态磁盘，反之亦然
Mar 25, 2024 am 09:36 AM
在创建虚拟机时，系统会要求您选择磁盘类型，您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘，后来意识到需要动态磁盘，或者相反，该怎么办?好!你可以把一种转换成另一种。在这篇文章中，我们将看到如何将VirtualBox固定磁盘转换为动态磁盘，反之亦然。动态磁盘是一种虚拟硬盘，它最初具有较小的大小，随着您在虚拟机中存储数据，其大小会相应增长。动态磁盘在节省存储空间方面非常高效，因为它们只占用所需的主机存储空间。然而，随着磁盘容量的扩展，可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的
闲鱼怎么搜索用户
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,
wps怎么排序成绩高低
Mar 20, 2024 am 11:28 AM
在我们的工作中，经常会用到wps软件，wps软件处理数据的方式方法是非常多的，而且函数功能也是非常强大的，我们经常用函数来求平均值，求汇总等，可以说只要是统计数据能用的方法，wps软件库里都已经为大家准备好了，下面我们要介绍的是wps怎么排序成绩高低的操作步骤，看完以后大家可以借鉴一下经验。1、首先打开需要排名的表格。如下图所示。 2、然后输入公式＝rank（B2，B2：B5，0），一定要输入0。如下图所示。 3、输入完公式以后，按下电脑键盘上的F4键，这步操作是为了让相对引用变为绝对引用。
