码迷,mamicode.com
首页 > 其他好文 > 详细

angular入门--filter搜索

时间:2015-09-10 21:10:03      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

首先,列表绑定忽略

先上代码

<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即可,即双向绑定

angular入门--filter搜索

标签:

原文地址:http://www.cnblogs.com/benchan2015/p/4798904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!