【问题标题】:how to do easiest group of filtering conditions in angularjs?如何在angularjs中做最简单的过滤条件组?
【发布时间】:2016-03-01 05:35:45
【问题描述】:

我有四个过滤,例如 JobType、Experience、DateAdded 和 Salary 我想按个人和组进行过滤。为此,我在控制器中将过滤器定义为 filterType 并添加到模板中,如下所示。

在我的控制器中

.filter('filterType', function($filter) {

      // Create the return function
      // set the required parameter name to **params**
      return function(jobs,workType,experience,dateAdded,salary) {
          var filtered =[];
          var wT = angular.isUndefined(workType);
          var exp = angular.isUndefined(experience);
          var dA = angular.isUndefined(dateAdded);
          var sal = angular.isUndefined(salary);

          if(wT && exp && dA && sal)
            return jobs;


      angular.forEach(jobs,function(job){
        if(exp && dA && sal){
          if(job.type == workType)
              filtered.push(job)
        }
        else if(dA && sal && wT){
          var exp_val = $filter('split')(experience,',',0);  
          if(job.experience ==  exp_val)
              filtered.push(job)            
        }
        else if(sal && wT && exp){
          var date_field = $filter('pastDay')(job.created_at);
            console.log(job.created_at);
            console.log(date_field);
          if(dateAdded == date_field){
             filtered.push(job);
          }

        }
        else if(wT && exp && dA){
          var exp_val = $filter('split')(experience,',',0);  
          if(job.created_at ==  exp_val)
              filtered.push(job)            
        }

      });      
      return filtered;
  }
 })  

在我的模板中

<div flex="20" flex-sm="100" ng-repeat="job in jobs | filterType: workType:experience:dateAdded:salary">

过滤按我预期的那样工作,问题是假设如果我想使用一组过滤进行过滤,我是否需要为其编写一组 if/else 语句。这似乎是一项漫长的工作..

谁能建议最好的解决方法??????

【问题讨论】:

    标签: angularjs angularjs-scope angularjs-ng-repeat angularjs-controller angularjs-filter


    【解决方案1】:
    .filter('filterType', function($filter) {
    
    // Create the return function
    // set the required parameter name to **params**
      return function(jobs,wT,exp,dA,sal) {
        var filtered =[];
        var multiple = false;
    
      if(!wT && !exp && !dA && !sal)
        return jobs;
    
    
        if(wT){
             var val = multiple ? filtered : jobs;
             var filtered_wT = [];  
             angular.forEach(val,function(job){
              if(job.type == wT)
                filtered_wT.push(job);
             });
                filtered = filtered_wT;
                multiple = true;
        }
        if(exp){
              var exp_val = $filter('split')(exp,',',0);
              var filtered_exp = [];
              var val = multiple ? filtered : jobs;
                angular.forEach(val,function(job){
                 if(job.experience ==  exp_val)
                   filtered_exp.push(job);
                 });
                filtered = filtered_exp;
                multiple = true;
        }
        if(dA){
             var val = multiple ? filtered : jobs;
             var filtered_dA = [];
             angular.forEach(val,function(job){
              var date_field = $filter('pastDay')(job.created_at);                       
               if(dA == date_field)
                filtered_dA.push(job);
               });
            filtered = filtered_dA;
            multiple = true;
        }
        if(sal){
            var filtered_sal = [];
            angular.forEach(jobs,function(job){
              var min_sal = $filter('split')(sal,'-',0);  
              var max_sal = $filter('split')(sal,'-',1);  
              if(min_sal >= job.minsalary && max_sal <= job.maxsalary)    
                filtered_sal.push(job);
            });
            filtered = filtered_sal;
            multiple = true;
        }
    
      return filtered;
      }
    })    
    

    【讨论】:

      【解决方案2】:

      你可以这样做:

      .filter('filterType', function($filter) {
        return function(jobs,workType,experience,dateAdded,salary) {
          var filtered = Array.prototype.slice.apply(jobs); // make a copy of the array
        if(!workType && !experience && !dateAdded && !salary){
          return filtered;
        }
      
        if(workType){
          filtered = $filter('filter')(filtered, {type: workType});
        }
      
        if(experience){
         //filter by experience, like workType
        }
      
        if(dateAdded){
         // filter by date, like workType
        }
      
        //     ... other filters
      
        return filtered;
       }
      })  
      

      【讨论】:

      • filtered = $filter('filter')(filtered, {type: workType});如何在过滤器中取这个参数?
      • "不允许在转发器中重复。使用 'track by' 表达式指定唯一键。转发器:job in jobs | filterType:" 发生此错误
      • “在过滤器中取这个参数”是什么意思?另外,请创建一个 plunkr/jsbin 来重现您所看到的问题。
      猜你喜欢
      • 1970-01-01
      • 2021-06-16
      • 1970-01-01
      • 2017-03-27
      • 1970-01-01
      • 2016-05-13
      • 2013-06-23
      • 2010-10-24
      • 2020-08-08
      相关资源
      最近更新 更多