Question

例如我有这样的列表（我使用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'}]

现在我只能在控制器中过滤一个值，并且我被多个字段过滤器所困扰（（

Answer 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;
};

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

Answer 3

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

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)

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

3 个答案: