首先,列表绑定忽略
先上代码
<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即可,即双向绑定
时间: 2024-09-30 09:32:33