Question

我有一个对象数组：

scope.values = [
   {'key1':'valueA', 'key2': 'valueD'},
   {'key1':'valueB'},
   {'key1':'valueC'}
]

我想过滤搜索输入，其中可以包含多个用逗号或空格分隔的单词：

<input ng-model="scope.search"></input>

我们可以列出如下数组：

<p ng-repeat="index, obj in scope.values | filter:scope.search"></p>

但是，这仅适用于一个输入。当我有多个输入时我该怎么办约翰·多伊。

请注意，我希望它是有条件的。因此，如果找到了John或Doe，则不会，而是找到John和Doe时。

Answer 1

我认为内置过滤器无法做到这一点。您可能想要的是自定义过滤器，如文档here（位于页面的大约一半）和官方教程here中所述。

例如，此自定义过滤器应执行您想要的操作。

app.filter("multiSearch", [
   function() {
      //"data" is your searchable array, and "search" is the user's search string.
      return function(data, search) {
         //Get an array of search values by splitting the string on commas and spaces.
         var searchArray = search.toLowerCase().split(/[, ]/);
         //Use javascript's native Array.filter to decide which elements to cut and to keep.
         return data.filter(function(item) {
            //If the item contains ALL of the search words, keep it.
            var foundCount = 0;
            for (var searchElement of searchArray) {
               for (var attribute in item) {
                  if (
                     String(item[attribute])
                        .toLowerCase()
                        .includes(searchElement)
                  ) {
                     foundCount++;
                     break;
                  }
               }
            }
            if (foundCount === searchArray.length) {
               //Matched all search terms. Keep it.
               return true;
            }
            else {
               //Not a match. Cut it from the result.
               return false;
            }
         });
      };
   }
]);

然后在您的html中，您可以这样称呼它：

<p ng-repeat="index, obj in scope.values | multiSearch:scope.search"></p>

如注释中所建议，您可能要考虑的另一件事是完全放弃使用过滤器，而只是在控制器内部运行逻辑。您可以使用上面示例过滤器中提供的许多逻辑-您只需实现自己的系统即可在搜索查询更改时运行过滤逻辑。避免在angularjs中使用过滤器有很多好处，但这是另一个主题。

使用多个输入检查对象数组中所有键的条件过滤器

1 个答案: