Javascript（angularJS）：按多个字段过滤答案

【问题标题】：Javascript (angularJS): filter by multiple fieldJavascript（angularJS）：按多个字段过滤
【发布时间】：2017-01-23 15:54:24
【问题描述】：

例如，我有这样的列表（我与 ng-repeat 一起使用）：

var myList = [
  {id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'},
  {id: 2, name: 'Maya Nameson', type: 'Manager', status: 'Not'},
  {id: 3, name: 'Iki Jonny', type: 'Driver', status: 'Paused'},
  {id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'},
  {id: 5, name: 'Nikolay Ivanov', type: 'Sales manager', status: 'Not'},
  {id: 6, name: 'Scotty Deperson', type: 'Boss', status: 'Working'},
]

我有过滤器数组：

nameFilter: ['Peter Ollison', 'Nikolay Ivanov']
typeFilter: ['Manager', 'Driver']
statusFilter: ['Working']

如何在过滤器功能中组合所有这些过滤器？并且只返回列表中的这些项目，它们等于过滤器数组？但！！！我可以：

仅按名称、或仅按类型、或 2 个字段或全部过滤

如何过滤我的列表？

例如，如果我一次过滤 3 个过滤器数组，我应该得到结果：

[{id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'},
{id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'}]

现在我只能通过控制器中的一个值进行过滤，并且我被多个字段过滤器卡住了（（

【问题讨论】：

请分享您的代码。
@Abhijeet pastebin.com/L3jXWTDy
您想通过同时匹配每个属性的任何值来进行过滤？所以名字可能是 peter 或 nikolay，类型可能是 manager 或 driver，status 必须是 working？
@LeonardoLana 是的
试试看pastebin.com/qbH9HCHi

标签： javascript angularjs filter

【解决方案1】：

$scope.showIssueItem = function (item) {
  var resultAssigneeCount = 0,
      resultTypeCount = 0,
      resultStatusCount = 0;

  if ($scope.nameFilterArr.length > 0) {
    angular.forEach($scope.nameFilterArr, function(value) {
      if (item.name === value) {
        resultAssigneeCount++;
      }
    });
  }else{
       resultAssigneeCount = 1;
  }

  if ($scope.typeFilterArr.length > 0) {
    angular.forEach($scope.typeFilterArr, function(value) {
      if (item.type === value) {
        resultTypeCount++;
      }
    });
  }else{
       resultTypeCount = 1;
  }

  if ($scope.statusFilterArr.length > 0) {
    angular.forEach($scope.statusFilterArr, function(value) {
      if (item.status === value) {
        resultStatusCount++;
      }
    });
  }else{
       resultStatusCount = 1;
  }

  return resultAssigneeCount>0 && resultTypeCount>0 && resultStatusCount>0;
};

【讨论】：

如果我有 resultStatusCount === []，它不会输出任何东西

【解决方案2】：

function contains(a, obj) {
    var i = a.length;
    while (i--) {
       if (a[i] === obj) {
           return true;
       }
    }
    return false;
}

$scope.showItemOrNot = function (item) {

          var match = [];
          var filters = [ {
             attr : 'assignee',
             source : $scope.assigneeFilterArr
            },
            {
                attr : 'type',
                source : $scope.typeFilterArr
            },
            {
                attr : 'status',
                source : $scope.statusFilterArr
            }
            ];

          for(var x in filters) {
              if(filters[x].source.length > 0) {
                match.push(contains(filters[x].source,item[filters[x].attr]));
              }
          }

          return !contains(match,false);
};

【讨论】：

【解决方案3】：

使用嵌套的Array.protoype.filter()'s

var filterProps =  ['name','type','status'];

var filteredData = myList.filter(function(item){
  return  filterProps.filter(function(prop){
    var filter = filters[prop +'Filter'];   
    return !filter || !filter.length ||  filter.indexOf(item[prop]) >-1;
  }).length === filterProps.length;
})

var myList = [
  {id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'},
  {id: 2, name: 'Maya Nameson', type: 'Manager', status: 'Not'},
  {id: 3, name: 'Iki Jonny', type: 'Driver', status: 'Paused'},
  {id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'},
  {id: 5, name: 'Nikolay Ivanov', type: 'Sales manager', status: 'Not'},
  {id: 6, name: 'Scotty Deperson', type: 'Boss', status: 'Working'},
]

var filters = {
  nameFilter: ['Peter Ollison', 'Nikolay Ivanov'],
  typeFilter: ['Manager', 'Driver'],
  statusFilter: ['Working']

}
    
var filteredData = myList.filter(function(item){
  var filterProps =  ['name','type','status']
  return  filterProps.filter(function(prop){
    var filter = filters[prop +'Filter'];   
    return !filter || !filter.length ||  filter.indexOf(item[prop]) >-1;
  }).length===filterProps.length;
});

console.log(filteredData)

【讨论】：