如何在angularjs中做最简单的过滤条件?

时间:2015-11-27 04:21:57

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

我有四个过滤,例如 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语句集。这似乎是一项漫长的工作..

任何人都可以提出解决问题的最佳方法吗?

2 个答案:

答案 0 :(得分:1)

你可以这样做:

.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;
 }
})  

答案 1 :(得分:0)

.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;
  }
})