Question

我已将Angular文档中的示例转换为Plunker，以便快速演示我要做的事情。我所拥有的是名称和lastName作为数组中对象的一部分。当我开始过滤输入时，它运行良好，直到我输入姓名之后输入lastName。如何使用它以便搜索结果包含名称和lastName？我一直对此感到困惑，无法解决这个问题，所以我正在寻求一些帮助。

<div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />

  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
 </ul>
</div>

以下是Plunker：the vis.js documentation

提前感谢您提供任何帮助。

编辑：我要找的是，如果我输入John Doe，结果就不会说＆＃34;没有找到结果＆＃34;。如果我输入一个属性，它工作正常，但一旦我开始执行lastName，就没有找到结果。

Answer 1

要显示lastName，您可以执行与您对朋友name和age同时执行的操作。

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} {{friend.lastName}} who is {{friend.age}} years old.
</li>

我已更新了您的plunkr：https://plnkr.co/edit/gocfrflA6VKUDBwBcYKK?p=preview

编辑：由于您也有兴趣搜索多个字段的组合，因此您需要实现自定义过滤功能。

$scope.search = function (friend) {
  var fullName = friend.name + ' ' + friend.lastName;
  return !$scope.q || fullName.indexOf($scope.q) !== -1;
};

和

<li class="animate-repeat" ng-repeat="friend in friends | filter: search">

我为此创造了一个傻瓜：https://plnkr.co/edit/fr3XH3ghMw0hidceXDVx?p=preview

更好的方法是使用自定义过滤器。一定要读： https://toddmotto.com/everything-about-custom-filters-in-angular-js/和https://docs.angularjs.org/guide/filter

Answer 2

在另一种方法中，我想修改我正在迭代的列表，friends。

<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
<ul class="example-animate-container">

    <!-- instead of using the list directly I'd like to call a function which would return me the filtered list, hence getFriends()-->

    <li class="animate-repeat" ng-repeat="friend in getFriends()">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="getFriends().length === 0">
      <strong>No results found...</strong>
    </li>
</ul>

现在在我的控制器中，我实现了以下功能 -

$scope.$watch('q', function () {    
  $scope.getFriends = function(){
    var friends = $scope.friends;

    var params;

    if( $scope.q.indexOf(' ') > -1 ){
      var q = $scope.q.split(" ");
      params = {
        name: q[0],
        lastName: q[1]
      };
    }
    else{
      params = $scope.q;
    }

    // You can modify params for even more powerful filter... if you need actually...

    return $filter("filter")(friends, params);
  }
}

我使用这种方法，以便我可以在控制器中完全访问过滤器。大多数情况下我需要这种类型的自定义过滤器不超过一次，所以我宁愿将它们放在我的控制器中。

虽然有一个小故障，你需要在控制器的某个地方定义$scope.q，否则它会通过Reference Error

https://plnkr.co/edit/7FTgkXOtldihFBy7cuSP?p=preview

<强>更新

@FrederikPrijck向我介绍了一个很好的例子，说明如何在每个摘要周期中消除调用此函数。我已经更新了我的回答。 另一件事是我使用这种方法当我需要对我的过滤器进行非常广泛的控制时，就像你没有多个输入字段的空间但你需要过滤多个属性，或者有时我需要根据{{1}}更新列表。如果您需要使用此问题的简单过滤器，请使用接受的答案。

Answer 3

        **Hey i have changed json object of $scope.friends**
     I have added one more key **fullName** now it will search on fullName

            angular.forEach($scope.friends,function(value,key)
           {
             value['fullName'] = value.name +" " + value.lastName;
            })

如何重复多个属性？

3 个答案: