zoukankan      html  css  js  c++  java
  • angularJS自定义一个过滤器

    ng允许我们自定义指令

    下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式

    filter(name,callback(){//name:过滤器的名字,callback:匿名函数
    
      return function(collection,keynames){//collection:该指令前面的对象,keynames:用于过滤的关键字
    
        /........................./
    
      }
    
    })

    1.金典的例子

    <!doctype html>
    <html lang="en" ng-app="myApp">
     <head>
      <script src="angular.js"></script>
     </head>
     <body  ng-controller="myCtrl">
          <div ng-repeat="item in array_object | unique:'name'">
             {{item}}
          </div>
     </body>
    </html>
    <script>
     angular.module("myApp",[])
     .controller("myCtrl",["$scope",function(s){
       s.array_object=[{"name":"明哥哥"},{"name":"小林黛玉"},{"name":"大哥大"},{"name":"小林黛玉"}];
       s.Two_Fish="fdsdf";
         s.change=function(){
           console.log(s.Two_Fish);
    
         }
     }])
    .filter("unique",function(){
       return function(collection,keynames){//collection->array_object、keynames->name,分别对应过滤器两边的条件
          var output=[];//存储,过滤之后的对象
          var keys=[];//用于对比过滤
          angular.forEach(collection,function(item){
             var key=item[keynames];
              if(keys.indexOf(key)===-1){
               keys.push(key);
               output.push(item); 
              }
    
          });
           console.log(output);
          return output;
       }
    });
    </script>
    
    结果很迷人:
    {"name":"明哥哥"}
    
    {"name":"小林黛玉"}
    
    {"name":"大哥大"}

    2.如果要进行多个参数进行过滤:

    <span  ng-bind="d[h.key] | numFormat:h.adSrhType:camb"></span>
      // 数字的千分符转换
        .filter('numFormat',[function(){
            return function numToThousands (n,valType,camb) {
                if (valType === 'number' && n!== undefined && n!==null && n.toString().length > 0){ 
                    n = n.toString();
                    var re = /d{1,3}(?=(d{3})+$)/g;
                    n = n.replace(/^(d+)((.d+)?)$/, function (s, s1, s2) { return s1.replace(re, '$&,') + s2;});
                } 
                return n;
            };  
        }])
    

      

     
      
  • 相关阅读:
    Ubuntu16.04 安装Teamviewer
    Redis 中的事务
    apache rewrite .htaccess 站点内容重定向实例
    PHP_EOL常量
    PHP 设计模式之适配器模式
    MYSQL优化
    php设计模式之简单工厂模式
    php设计模式之单例模式
    PHP设计模式之策略模式
    PHP 设计模式之观察者模式 (转载)
  • 原文地址:https://www.cnblogs.com/evaling/p/eval_ing.html
Copyright © 2011-2022 走看看