angular入门--filter搜索
首先,列表绑定忽略
先上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | < html ng-app="app1"> < head > < meta charset='utf-8' /> < meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> < title >angularJs filter</ title > < script src="angular.min.js"></ script > </ head > < body ng-controller='ctrl1' > < input type='text' ng-model='keywords' /> < input type='button' ng-click='search()' value="Search" /> < ol > < li ng-repeat="item in data | filter:{name:searchText}"> < ul > < li >name:< span ng-bind="item.name"></ span ></ li > < li > age:< span ng-bind="item.age"></ span ></ li > < li > sex:< span ng-bind="item.sex"></ span ></ li > < li > height:< span ng-bind="item.height"></ span ></ li > < li > description:< span ng-bind="item.description"></ span ></ li > </ ul > </ li > </ ol > < script > var dataList=[{ name:'mary', age:24, sex:'female', height:'170cm', description:'Hi,everyBody,Nice to meet you' }, { name:'Jackey', age:28, sex:'male', height:'187cm', description:'Hi,all,Nice to meet you' }, { name:'Leon', age:27, sex:'male', height:'180cm', description:'Hi,everyBody,I\'m from china' }, { name:'Andy', age:42, sex:'male', height:'173cm', description:'Hi,everyBody,I\'m from Hong kong' }] var app=angular.module('app1',[]); app.controller('ctrl1',['$scope',function($scope){ $scope.name="China"; $scope.data=dataList; $scope.sort='age'; $scope.desc=true; $scope.keywords=''; $scope.searchText=''; $scope.search=function(){ $scope.searchText=$scope.keywords; } }]) </ script > </ body > </ html > |
实现的效果就是输入关键字,会根据name进行搜索,如下所示
如果是对data进行全局搜索,只需要把这句话改成item in data | filter:{name:searchText} -----》item in data | filter:searchText
如果想做成不使用按钮,直接搜索框的值改变时即可实现搜索,那个直接将item in data | filter:{name:searchText}改成item in data | filter:keywords即可,即双向绑定
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗