javascript - 使用 AngularJS 搜索特定字段

Question

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

我需要搜索所有三个字段并输入如下内容(是的，我正在使用 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

我已经找到答案了。 Google 是您的 friend 。

我需要更换:

filter: { airlineName: search.airlineName }

与

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

工作很愉快。全帖here .