Question

我已阅读有关过滤器here的AngularJS文档，但我发现很难理解。我有一份航空公司列表，包括航空公司名称，航空公司所在国家和一个标志，表明航空公司是否被删除。没有过滤器，所有行都按预期显示。

我需要搜索所有三个字段并输入这样的信息（是的，我使用的是Bootstrap）：

<div class="row">
    <div class="col-sm-2" style="text-align: right">
        <label for="airport-name-search" class="control-label">Airline Name</label>
    </div>
    <div class="col-sm-2">
        <input ng-model="search.airlineNameSearch" type="text" class="form-control input-sm" id="airport-name-search"/>
    </div>
    <div class="col-sm-2" style="text-align: right">
        <label for="country-name-search" class="control-label">Country Name</label>
    </div>
    <div class="col-sm-2">
        <input ng-model="search.countryName" type="text" class="form-control input-sm" id="country-name-search"/>
    </div>
    <div class="col-sm-2" style="text-align: right">
        <label for="include-deleted-search" class="control-label">Include Deleted</label>
    </div>
    <div class="col-sm-2">
        <input ng-model="search.includeDeleted" type="checkbox" id="include-deleted-search"/>
    </div>
</div>

我的表格如下：

<table class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <th>Ariline ID</th>
            <th>Airline Name</th>
            <th>Country</th>
            <th>Telephone</th>
            <th>24hr Telephone</th>
            <th>Email Address</th>
            <th>Deleted</th>
        </tr>
    </thead>
    <tr dir-paginate="airline in airlines | filter:search | itemsPerPage: pageSize" current-page="currentPage">
        <td>{{ airline.airlineId }}</td>
        <td>{{ airline.airlineName }}</td>
        <td>{{ airline.country }}</td>
        <td>{{ airline.telephoneNumber }}</td>
        <td>{{ ariline.telephone24Hour }}</td>
        <td>{{ airline.emailAddress }}</td>
        <td>{{ airline.isDeleted }}</td>
    </tr>
</table>

我知道自定义过滤器不能接受对象数组（这就是我读到的东西;也许事情已经改变了）。我正在努力构建一个内联过滤器来搜索这三个字段，我不认为我必须编写自定义过滤器。我目前对过滤器的尝试如下：

ng-repeat="airline in airlines | filter:search | itemsPerPage: pageSize"

有人能指出我正确的方向吗？

更新

我在创建过滤器方面取得了一些成功，例如：

<tr dir-paginate="airline in airlines | filter: { airlineName: search.airlineName } | filter: { country: search.countryName } | filter: { isDeleted: search.includeDeleted } | itemsPerPage: pageSize" current-page="currentPage"><!--- ... ---> </tr>

但唯一的问题是，如果首次加载页面时搜索输入为空，则过滤器会失败。一旦添加标准然后删除（空白），它就可以正常工作。我怎么能纠正这个？

Answer 1

我找到了答案。谷歌是你的朋友。

我需要替换：

filter: { airlineName: search.airlineName }

与

filter: { airlineName: search.airlineName||'' }

工作一种享受。完整帖子here。

Answer 2

从Angular v1.3开始，您可以使用：angular-filter。请特别注意：filterBy。我不明白为什么你需要||''，看起来你想要

filterBy: ['airlineName']: search.airlineNameSearch

其中search.airlineNameSearch是输入框的模型。它将为空以便返回所有结果。

使用AngularJS搜索特定字段

2 个答案: