如何过滤AngularJS ng-repeat中的多个字段

Question

我正在创建一个使用 AngularJS 中的查询过滤器进行搜索的网站。我找到了许多关于如何在一个字段中实现此搜索的教程，但没有一个解释如何跨多个字段进行搜索。因此，如果您的数据有名字：“约翰”，姓氏：“史密斯”，我希望能够在我的搜索栏中输入“约翰史密斯”，并找到正确的结果，但只有“约翰”或“史密斯”的作品。

<div ng-include="'partials/navbar.html'"></div>
<div class="container" ng-controller="ResListCtrl">
    <div class="row">
        <div class="col-md-2">
            Search: <input ng-model="query">
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-10">
            <ul ng-repeat="reservation in reservations | filter:query">
                <li><a href="#">{{reservation.firstName}} {{reservation.lastName}}</a></li>
                <p>{{reservation.resort}}</p>
            </ul>
        </div>
    </div>
</div>

Answer 1

根据角度文档，您可以将对象传递给过滤器。所以你可以这样做：

scope.query = {};

然后在你的html中

First name: <input ng-model="query.firstName" />
Last name: <input ng-model="query.lastName" />

您的过滤器表达式将保持不变：

ng-repeat="reservation in reservations | filter:query"

有关更多信息，请参阅“表达式”参数的详细信息：https://docs.angularjs.org/api/ng/filter/filter。

Answer 2

过滤器也接受一个函数（https://docs.angularjs.org/api/ng/filter/filter）：

function(value, index) {
  return value === query.first_name + ' ' + query.last_name;
}