zoukankan      html  css  js  c++  java
  • angularjs 过滤多组数据

    <html>  
      <head>  
     <script src="angular.min.js"></script>  
     <script type="text/javascript"> 
     var arr = [1,2,3,4,5];
     arr.splice(0,arr.length-3  );
     console.log( arr.splice(0,arr.length-3  ) );
         
         
     function windowScopedFilter (input,param2) {  
          var output = []; 
          console.log( param2 );
          angular.forEach(input, function(v,k){ 
              var org_d = v.name+v.phone ;
              console.log( org_d );
    
              switch(param2.length){
                  case 1:
                      if (org_d.indexOf( param2[0] )!=-1) {  
                            output.push(v);  
                       } 
                      break;
                  case 2:
                      if (org_d.indexOf( param2[0] )!=-1 && org_d.indexOf( param2[1] )!=-1 ) {  
                            output.push(v);  
                       } 
                      break;
                  case 3:
                      if (org_d.indexOf( param2[0] )!=-1 && org_d.indexOf( param2[1] )!=-1&& org_d.indexOf( param2[2] )!=-1 ) {  
                            output.push(v);  
                       } 
                      break;
              }
              
                
          });  
          return output;       
     }  
     var myapp = angular.module('MyFilterApp', []);  
     myapp.filter('myfilter', function() {  
       return function(input, param1) {  
          console.log("------------------------------------------------- begin dump of custom parameters");  
          console.log("input=",input);  
          console.log("param1(string)=", param1);  
          var args = Array.prototype.slice.call(arguments);
          console.log("arguments=", args.length,args);
          //没有传参
          if (3<=args.length) {  
               console.log("param2(string)=", args[2]);
               param2 = args[2];
          }
          //传1个参数
          if (4<=args.length) {  
               console.log("param3(string)=", args[3]); 
               param3 = args[3];
               
               return window[args[args.length-1]](input,args.splice(1,args.length-3 )  );
          }
          //传两个参数
          if (5<=args.length) {  
               console.log("param4(bool)=", args[4]); 
               param4 = args[5];
                args.splice(0,args.length-3 );
               return window[args[args.length-1]](input,args.splice(1,args.length-3 )  );
          } 
          console.log("------------------------------------------------- end dump of custom parameters");  
          // filter //传三个参数 
          if (6<=args.length) {  
              // return window[args[5]](input,args[2]); 
               return window[args[args.length-1]](input,args.splice(1,args.length-3 )  );
          }  
          return input;  
       };  
     });  
     myapp.controller('MyFilterController', ['$scope', function($scope) {  
       $scope.friends = [{name:'John', phone:'555-1276'},  
                          {name:'Annie', phone:'800-BIG-MARY'},  
                          {name:'Mike', phone:'555-4321'},  
                          {name:'Adam', phone:'555-5678'},  
                          {name:'David', phone:'555-8765'},  
                          {name:'Mikay', phone:'555-5678'}];  
     }]);  
     </script>  
     </head>  
     <body ng-app="MyFilterApp">  
     <div ng-controller="MyFilterController">  
          <table id="searchTextResults">  
           <tr><th>Name</th><th>Phone</th></tr>  
           <tr ng-repeat="friend in friends |myfilter:'Mike':'555': true:'windowScopedFilter'">  
            <td>{{friend.name}}</td>  
            <td>{{friend.phone}}</td>  
           </tr>  
          </table>  
     </div>  
     <hr>  
     </body>  
     </html>
    

    上面的例子可以直接拿取用,目前最多筛选三个参数

    参考文档:

    http://www.tuicool.com/articles/ueUZBv

    http://www.cnblogs.com/xing901022/p/4290102.html

    http://www.codeceo.com/article/angularjs-filter-usage.html

    http://www.oschina.net/translate/angularjs-filter-creating-custom-filter

  • 相关阅读:
    大数据
    优化
    gnu
    sed
    hadoop部署
    安装 zookeeper
    ansible
    ssh 配置无密码登录
    未完待续
    解正向代理、反向代理、透明代理
  • 原文地址:https://www.cnblogs.com/webskill/p/angular.html
Copyright © 2011-2022 走看看