关于ng的过滤器的详细解释angular-filter

在使用ng框架做项目的时候，我们可能会使用到ng自带的过滤器，来进行数据的筛选

一：ng自带的过滤器：currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter

过滤器有两种使用方法：第一种，页面是直接使用；第二种，js中使用

以上的过滤器的使用时偏简单的，查看文档对你很有用

这里，我们来讲解一下上面的简单中的很少用到的json,filter

关于json过滤器的作用是将一个javaScript对象转化为一个JSON字符串：

demo:

  <div>

     {{ {name: 'Ari', City: 'SanFrancisco'} | json }}

  </div>

页面显示的效果是:{ "name": "Ari", "City": "SanFrancisco" }

关于filter过滤器的用法：

页面中直接使用

 <div>

    {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

  </div>

页面显示的效果是：["aaassddd","kkklljj"]

举一个在js中使用的demo吧

<!doctype html>

<html lang="en" ng-app="myApp">

 <head>

   <script src="angular.js"></script>

 </head>

 <body>

     <div ng-controller="filterCtrl">

                 {{name}}

                 {{dollar}}

                 {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

                 {{ {name: 'Ari', City: 'SanFrancisco'} | json }}

                 {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

       </div>

 </body>

</html>

<script>

         angular.module("myApp",[])

                 .controller("filterCtrl",["$scope","$filter","currencyFilter",function(s,f,c){//方式一：直接使用$filter, 方式二：使用***Filter

                      s.name=f('lowercase')("ARTDF");

                      s.dollar=c(234);

       }])

</script>

二:讲解了ng的内置过滤器，我们来学学如何自定义过滤器

ng的自定义过滤器返回的是一个函数，我们可以在这个函数里进行系列操作

js:

 var myFilter=angular.module("filterModule",[])

  .filter("filter1",function(){

    return function(item){

       return item+'ABCDE';

    }

  });

html:

<div>{{432432423432| date:"yyyy-MM-dd"|filter1}}</div>

结果：1983-09-15ABCDE

demo2:自定义过滤器（直接上例子）

<!doctype html>

<html lang="en" ng-app="myApp">

 <head>

  <script src="lodash.js"></script>

    <script src="angular.js"></script>

 </head>

 <body ng-controller="myCtrl">

      <div ng-repeat="t in list | filterByObj:arr">{{t}}</div>

 </body>

</html>

<script>

  var app=angular

        .module("myApp",[])

           .controller("myCtrl",function($scope){

                 $scope.list=[1,3,4,5,12,23,6];

                 $scope.arr=[6,5,3,1];

           })

        .filter("filterByObj",[function(){

                 return function(list,obj){

                      var result=[];

                      angular.forEach(list,function(item){

                            var isEqual=true;

                            for(var e in obj){

                                  if(item==obj[e]){

                                       result.push(item);

                                  }

                            }

                      });

           return result;

                 }

           }]);

</script>

结果：1,3,5,6

借鉴资源链接：http://www.oschina.net/translate/angularjs-filter-creating-custom-filter

巴特西

关于ng的过滤器的详细解释angular-filter

最新文章

热门文章