Question

我的html中有一个文本框，我想通过我在框中输入的条件的逻辑AND过滤我页面上的结果。让我演示

假设我的页面上有

- Example number 1
- Example number 2
- Example number 3

通常情况下，如果我想过滤结果，我会做类似

的事情

<input type= "text" ng-model= "query">

以后

<tr ng-repeat= "thing in blah | filter : query">
    <td> {{thing}} </td>
</tr>

所以，如果我输入

"Example"

我可以理解的不是＆＃34;过滤＆＃34;任何东西。但是，如何使用多个搜索词进行逻辑AND？例如，如果我输入

"Example 1"

我应该只回到第一个例子，因为它包含＆＃34;示例＆＃34; AND＆＃34; 1＆＃34;。我没有在角度文档中看到任何允许我这样做的内容，但我确信可以通过创建我自己的过滤器来完成，我只是没有做任何事情的经验像这样。

Answer 1

创建自定义过滤器：

filter('and', function($log) {
  return function(items, query) {
    if (!query) return items; // return all items if nothing in query box

    var terms = query.split(' '); //split query terms by space character
    var arrayToReturn = [];

    items.forEach(function(item){ // iterate through array of items
      var passTest = true;
      terms.forEach(function(term){ // iterate through terms found in query box
        // if any terms aren't found, passTest is set to and remains false
        passTest = passTest && (item.toLowerCase().indexOf(term.toLowerCase()) > -1); 
      });
      // Add item to return array only if passTest is true -- all search terms were found in item
      if (passTest) { arrayToReturn.push(item); }
    });

    return arrayToReturn;
  }
})

并使用它代替filter: query：

<tr ng-repeat="thing in blah | and:query">

Plunker Demo

Answer 2

我的解决方案。它利用了Angulars filterFilter，并且比选择的答案有3个优势：

它也搜索对象（不仅仅是字符串）
搜索词之间可以是任意数量和类型的空白
代码短几行

以下是代码：

  app.filter('multiple', ['filterFilter', function (filterFilter) {
    return function (items, query) {
      if (!query) return items;

      var terms = query.split(/\s+/);
      var result = items;
      terms.forEach(function (term) {
        result = filterFilter(result,term);
      });

      return result;
    }
  }]);

Answer 3

Marc接受的答案也帮助了我，但是，当使用对象而不是字符串时，您需要使用点表示法来访问特定值。（例如'name'和'title'）

items.forEach(function(item){ // iterate through array of items
    var passTest = true;
    var found = false;
    terms.forEach(function(term){ // iterate through terms found in query box
        // if any terms aren't found, passTest is set to and remains false
        found = (item.name.toLowerCase().indexOf(term.toLowerCase()) > -1)
            || (item.title.toLowerCase().indexOf(term.toLowerCase()) > -1); 
        passTest = passTest && found;
    });
    // Add item to return array only if passTest is true -- all search terms were found in item
    if (passTest) { arrayToReturn.push(item); }
});

Angular JS按逻辑AND过滤，使用多个术语

3 个答案: