angular入门--filter搜索
首先，列表绑定忽略
先上代码
<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即可，即双向绑定
- 上一篇 »Java-Filter:过滤器请求拦截
- 下一篇 »java ssm框架入门，二添加语言滤器