此文为初学AngularJs的一个小总结,根据过滤器衍生的一个想法–模糊搜索,再加上数据双向绑定的优势,使得数据可以实时性的更新展示。
目的是如何创建自己的过滤器。
过滤器关于更多的AngularJs详细知识在这里就不做一一的总结,下面的模糊搜索事例将结合AngularJs基础知识得以实现。
首先简单描述下功能需求,搜索功能是在众多数据中,快速地让你找到你想要找的数据。但对于开发者来说,不仅仅需要考虑提供一个允许用户输入搜索条件的输入框,还需要考虑过滤器选择过滤的对象–筛选的字段。比如一条数据中有name、old、detail三个字段,用户在搜索时,我想要控制用户只能从name字段中搜索他想要的数据。
紧接着,就要开始着手我们的代码了….
HTML文件
首先编写index.html,并在<html>
加入ng-app表示整个<html>
都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如<div ng-app>
,则AngularJS脚本仅在该<div>
中运行。
并定义一个controller
为myAppCtrl
。
<!doctype>
<html ng-app="myApp">
<head>
<title>angular--自定义过滤器</title>
</head>
<body>
<div ng-controller="myAppCtrl">
<p>
<input type="text" ng-model="find" placeholder="请输入搜索的关键字">
</p>
<p ng-repeat="i in names | reverse:find">
<span>name:{{ i.name}}</span>
<span>old:{{i.old}}</span>
</p>
</div>
</body>
<script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script>
<script src="js/myapp.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
</html>
自定义一个过滤器–reverse
,过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。过滤器reverse
的输入值与ng-model="find"
指令绑定获取值。
js文件
为了避免全局全局定义的污染,推荐模块化,这也是angular的特性之一。
首先,创建模块文件myapp.js、controller.js文件、filter.js文件。
在myapp.js
文件中添加一下代码:
var myapp=angular.module("myApp",[]);
在controller.js
文件中给控制器myAppCtrl
中手动添加一些数据添加一下代码:
myapp.controller("myAppCtrl", function($scope){
$scope.names=[
{"name":"zhangsan", "old":"21"},
{"name":"lisi", "old":"nicai"},
{"name":"xaobi", "old":"21"}
]
});
在filter.js
文件中,实现自定义过滤器功能。
自定义过滤器,在创建的方法里返回一个方法,返回方法里有两个返回值,一个输入值,过滤条件值;
myapp.filter("reverse", function(){
return function(input, find){
//添加核心代码
}
});
核心代码中有两个重要的功能,判断input
输入框输入的值是否为空;数据与input输入框的值匹配并显示。
input
框中会有两张情况,一有输入值,一无输入值。
所以首先我们要判断input
输入框输入的值是否为空:
//判断过滤条件值是否为空
//如果为空则为无过滤条件,输出全部数据
if(find==undefined|| find==""){
return pslist;
}
else{
//数据与input输入框的值匹配
}
如果不为空,则让数据与input输入框的值匹配并显示
for(var t=0; t<pslist.length; t++){
var num=pslist[t].name.indexOf(find);
if(num>=0){
newarray[newarray.length]=pslist[t];
}
//最终返回新数组中的数据
return newarray;
}
filter.js
文件中最终的代码:
myapp.filter("reverse", function(){
return function(input, find){
//获取输入的数组
var pslist=[];
pslist=input;
//新的数组
var newarray=[];
//判断过滤条件值是否为空
//如果为空则为无过滤条件,输出全部数据
if(find==undefined|| find==""){
return pslist;
}else{
for(var t=0; t<pslist.length; t++){
//控制用户输入的搜索值只能与name字段匹配
var num=pslist[t].name.indexOf(find);
if(num>=0){
newarray[newarray.length]=pslist[t];
}
}
//最终返回新数组中的数据
return newarray;
}
}
});
demo: