Question

我是AngularJS的新手。我有3个输入字段，可以为一个帖子输入最多3个关键字：

<input type="text" ng-model="Keyword1"></input>
<input type="text" ng-model="Keyword2"></input>
<input type="text" ng-model="Keyword3"></input>

我正在使用ng-repeat显示帖子：

ng-repeat="post in posts | filter: searchKeyword"
...

并搜索：

Search Keyword: <input ng-model="searchKeyword.Keyword1">

如您所见，目前只搜索每个帖子的第一个关键字。如何只有一个搜索字段来搜索帖子的所有三个关键字？我知道我不能做到

<input ng-model="searchKeyword.Keyword1.Keyword2.Keyword3">

谢谢！

Answer 1

不确定是否要返回与至少一个关键字匹配的所有帖子或与所有关键字匹配的所有帖子。以下是如何创建自定义过滤器以匹配至少一个单词：

<div ng-controller="theController">
  <input ng-model="inputText"/>
  <!-- Use a custom filter to determine which posts should be visible -->
  <ul>
    <li ng-repeat="post in posts | filter:myFilter">{{post}}</li>
  </ul>
</div>

angular.module('theApp', [])
  .controller('theController', ['$scope', function($scope) {
    $scope.inputText = 'test';
    $scope.posts = [
      'test test2;lksdf asdf one asdf poo',
      'arm test test2 asdf',
      'test head arm chest'
    ];

    $scope.myFilter = function(post) {
      // default to no match
      var isMatch = false;

      if ($scope.inputText) {
        // split the input by space
        var parts = $scope.inputText.split(' ');

        // iterate each of the words that was entered
        parts.forEach(function(part) {
          // if the word is found in the post, a set the flag to return it.
          if (new RegExp(part).test(post)) {
            isMatch = true;
          }
        });
      } else {
        // if nothing is entered, return all posts
        isMatch = true;
      }

      return isMatch;
    };
  }]);

以下是plunkr：http://plnkr.co/edit/d17dZDrlhY2KIfWCbKyZ?p=preview

注意：此解决方案不会将关键字限制为3.可以输入任意数量的关键字，并以空格字符分隔。如果没有输入任何内容（或只是空格），则返回所有内容。

Answer 2

这是我要做的事情

编写自定义过滤器（https://docs.angularjs.org/guide/filter）
按空格分割输入（这将为您提供单独的单词）
逐个搜索输入中的所有单词

AngularJS使用一个字段搜索多个关键字

2 个答案: