搜索
简帛阁>技术文章>angular入门--filter搜索

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></li>
			<li> age:</li>
			<li> sex:</li>
			<li> height:</li>
			<li> 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即可,即双向绑定

转载于:https://www.cnblogs.com/benchan2015/p/4798904.html

首先,列表绑定忽略先上代码<htmlngappapp1><head><metacharsetutf8/><metanamegeneratorcontentHT
言我们在开发过程中经常会遇到在页面上实现全局搜索的需求,例如:表格搜索,通过关键词检索整个表格,过滤出我们需要的数据。在Angular6中我们可以通过Filter+Pipe的方式来实现这个功能。下面
部分知识来源Angular之自定义filter的用法JavascriptparseFloat、parseDouble类型转换,数值加减,四舍五入Angular内置过滤器自定义filter1先自定义过
今日偶刷朋友圈,某友人因研究Angular有感而发,作两篇博文,引得清华学子前来,问其是否出书,把我吓一跳,赶紧百度看看这个Angular是个何许人也,看简单介绍就觉得挺有意思的,决定入个坑。1、A
Angular1Angular简单对比三大框架框架名称AngularReactVue优点1良好的应用程序结构2双向数据绑定3指令、HTML模板4可嵌入、注入、测试…1速度快、模块化2跨浏览器、兼容性
首先,介绍下$filter服务:1、$filter是用来进行数据格式化的专用服务;2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、u
<htmlngappapp1><head><metanamegeneratorcontentHTMLTidyforHTML5(experimental)forWindow
文章目录过滤器写法常用过滤器orderBy过滤器filter过滤器其他过滤器:number:numcurrency:chart特定符号过滤器limitTo:num保留几个字符date:'formate
过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器(自定义过滤)。比如:页面中需要把显示的字母转换为大写,或者是把日期变成良好的格
什么是AngularAngularJS是动态Web应用程序的结构框架。它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件。AngularJS的数据绑定和依赖注