javascript - 检查对象是否具有基于数组的多个值

Question

解决方案

Sergio 下面的回答非常有效，特别是他提供的 objectsMatch 函数。我还需要支持多选选择元素进行过滤，因此我稍微修改了他的功能，以防其他人正在寻找类似的功能:

function objectsMatch(roll, filterObject) {
  var match = true;
  for (var prop in filterObject) {
    if(!roll.hasOwnProperty(prop) ||
       !filterObject.hasOwnProperty(prop)) continue;
       if(Array.isArray(filterObject[prop])){
         var matchesNoValues = function(){
           for(var i = 0; i < filterObject[prop].length; i++){
             console.log(filterObject[prop][i])
             if(roll[prop] == filterObject[prop][i]){
               return false;
             }
           }
           return true;
         }
           if (matchesNoValues()  &&
                filterObject[prop] != ''
               ) {
               match = false;
               }
       }else{
         if (roll[prop] != filterObject[prop]  &&
                filterObject[prop] != ''
             ) {
             match = false;
             }
       }
    }
  return match;
}

编辑 1

我能够在 MVP 中复制我正在寻找的功能 here 。现在我正在尝试找出如何将其应用到我的过滤器中。希望这可以更好地展示我想要实现的目标。

原帖

我正在尝试添加自定义过滤器来过滤 Angular 中表中的行。我需要检查重复中的每个对象是否具有过滤器数组中表示的所有值。这些值由我的表格中的 select 元素设置。

例如，我的数据集如下所示:

$scope.sushi = [
  { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
  { name: 'Philly', fish: 'Tuna', tastiness: 4 },
  { name: 'Tiger', fish: 'Eel', tastiness: 7 },
  { name: 'Tiger', fish: 'Tuna', tastiness: 3 },
  { name: 'Rainbow', fish: 'Variety', tastiness: 62 }
];

假设我的过滤器数组包含:

var filters = ['Philly', 'Tuna', 4];

它只会显示

$scope.sushi[1] 

在重复中。

然后假设过滤器数组值更新为:

var filters = ['Philly', 'Tuna', 1000];

现在不会显示任何行，因为我的数据集中没有对象包含过滤器数组中的所有值。

HERE是我迄今为止尝试过的链接，两种方法分别标记为 METHOD 1 和 METHOD 2。

我认为方法 1 已经差不多了，但是如果我选择对象中的多个值，则不会显示任何行，而只会显示一行当我只选择 1 过滤器时。至于方法 2，它仅检查过滤器数组中的至少一个值是否在对象中，而不是全部。

这是我的过滤器中的完整代码:

.filter('byColumn', function(){
  return function(rolls, filterVal){
  var filtered = [];
  var test = true;
  for(var x in rolls){
    var currentRoll = rolls[x];
    for(y in currentRoll){

    // METHOD 1
    var allMatches = true;
    for(var i = 0; i < filterVal.length; i++){
      if(filterVal[i]){
        if(currentRoll[y] == filterVal[i]){
          continue;
        }else{
          allMatches = false;
          break;
        }
      }
    }
    if(allMatches){
        if (filtered.indexOf(currentRoll) == -1) {
          filtered.push(currentRoll);
        }
    }
    if(!allMatches){
      rolls = [];
    }

    // METHOD 2
    // angular.forEach(filterVal, function(filter){
    //   if(currentRoll[y] == filter){
    //     if (filtered.indexOf(currentRoll) == -1) {
    //         filtered.push(currentRoll);
    //     }
    //   }
    // });

      }
    }
        return filtered.length ? filtered : rolls;
      }
    });

该代码基于 Scotch.io 发现的教程 here我已对其进行了修改以满足我的需要。

预先感谢您的任何建议。

Answer 1

您可以将 columnFilter 对象而不是 filters 数组传递给 byColumn 过滤器

看起来像这样:

<tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish | byColumn:columnFilter track by $index">
  <td>{{ roll.name }}</td>
  <td>{{ roll.fish }}</td>
  <td>{{ roll.tastiness }}</td>
</tr>

byColumn 过滤器可能如下所示:

.filter('byColumn', function(){
    return function(rolls, filterVal){

   var filtered = [];

   for(var x in rolls){
      var currentRoll = rolls[x];

      if(objectsMatch(currentRoll, filterObject)) {
          filtered.push(currentRoll);
      }
   }

   return filtered;
  };
})

这就是objectsMatch函数

function objectsMatch(roll, filterObject) {

    var match = true;

    for (var prop in filterObject) {

        if(!roll.hasOwnProperty(prop) ||
           !filterObject.hasOwnProperty(prop)) continue;

        if (roll[prop] != filterObject[prop] && filterObject[prop] != '') 
        {
            match = false;
        }
    }

    return match;
}

fiddle Here

希望这对您有用!