Angular JS通过逻辑AND过滤，使用多个术语答案

【问题标题】：Angular JS filter by logical AND, using multiple termsAngular JS通过逻辑AND过滤，使用多个术语
【发布时间】：2014-06-23 15:51:09
【问题描述】：

我的 html 中有一个文本框，我想通过我在框中输入的术语的逻辑与来过滤页面上的结果。让我演示一下

假设在我的页面上我有

- 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"

可以理解的是，我不会“过滤”任何东西。但是，我将如何使用多个搜索词进行逻辑与？例如，如果我输入

"Example 1"

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

【问题讨论】：

标签： javascript angularjs filter logical-operators

【解决方案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

【讨论】：

顺便说一句，如果使用 Underscore、lodash 或者如果您愿意为版本，则可以稍微清理一下过滤器的内部
如果我的“东西”不是一个文本字符串，而是一个带有一个名为“名称”的字段的 javascript 对象。我将如何根据名称进行过滤？

【解决方案2】：

Marc 接受的答案也对我有所帮助，但是，在使用对象而不是字符串时，您需要使用点表示法来访问特定值。（例如“姓名”和“职务”）

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

【讨论】：

【解决方案3】：

我的解决方案。它利用了 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;
    }
  }]);

【讨论】：