AngularJs--自定义过滤器
发布在学习Angular--拓展2015年10月19日view:4993
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

此文为初学AngularJs的一个小总结,根据过滤器衍生的一个想法–模糊搜索,再加上数据双向绑定的优势,使得数据可以实时性的更新展示。

目的是如何创建自己的过滤器。

过滤器关于更多的AngularJs详细知识在这里就不做一一的总结,下面的模糊搜索事例将结合AngularJs基础知识得以实现。

首先简单描述下功能需求,搜索功能是在众多数据中,快速地让你找到你想要找的数据。但对于开发者来说,不仅仅需要考虑提供一个允许用户输入搜索条件的输入框,还需要考虑过滤器选择过滤的对象–筛选的字段。比如一条数据中有name、old、detail三个字段,用户在搜索时,我想要控制用户只能从name字段中搜索他想要的数据。

紧接着,就要开始着手我们的代码了….

HTML文件

首先编写index.html,并在<html>加入ng-app表示整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如<div ng-app>,则AngularJS脚本仅在该<div>中运行。

并定义一个controllermyAppCtrl

<!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:

评论
发表评论
2年前

@TransNet2013 判断 num=pslist[t].name.indexOf(find),num的至小于0返回无匹配数据就可以了

2年前

如何让没匹配项的时候显示『没有匹配项』

WRITTEN BY
执笔的蜗牛
Life is like the ocean
TA的新浪微博
PUBLISHED IN
学习Angular--拓展

在学习Angular过程中的总结和致用。

我的收藏