zoukankan      html  css  js  c++  java
  • 关于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

  • 相关阅读:
    Linux的学习--系统目录
    PHP内核的学习--创建PHP扩展
    PHP的学习--连接MySQL的三种方式
    MIME Type
    颜色的命名
    JavaScript的学习--生成二维码
    MySQL的学习--触发器
    Google Guava之--cache
    java代码调用oracle存储过程
    oracle序列
  • 原文地址:https://www.cnblogs.com/evaling/p/6701058.html
Copyright © 2011-2022 走看看