AngularJs--自定义过滤器 - 学习Angular--拓展

此文为初学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：