使用AngularJS搜索特定字段

我已閱讀有關過濾器here的AngularJS文檔，但我覺得很難理解。我有一個航空公司名單，包括航空公司名稱，航空公司國家和一個標誌，以表明航空公司是否被刪除。沒有篩選器，所有行都按預期顯示。使用AngularJS搜索特定字段

我需要搜索在所有三個領域，有這樣的輸入（是的，我現在用的引導）：

<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"

任何人都可以點我在正確的方向？

UPDATE

我已經取得了一些成功創建一個過濾器，這樣的：

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

，但剩下的唯一的問題是，如果搜索輸入爲空時，頁面第一過濾器失敗負載。一旦添加標準並刪除（空白），它就可以正常工作。我該如何解決這個問題？

來源

2015-05-12 serlingpa

提供了一個鏈接到jsfiddle。 – Aakash

我從來沒有在...之前創建過一個jsfiddle。 – serlingpa

您使用的是哪個版本的angularjs？ – Sam

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

我需要更換：

filter: { airlineName: search.airlineName }

與

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

作品一種享受。完整的帖子here。

來源

2015-05-12 11:01:38 serlingpa

從Angular v1.3開始，你可以使用這個：angular-filter。具體見：filterBy。我不明白你爲什麼會需要||''，它看起來像你想

filterBy: ['airlineName']: search.airlineNameSearch

其中search.airlineNameSearch是您輸入框模型。這將是空的開始，將返回所有結果。

來源

2015-05-12 11:58:34 Sam

使用AngularJS搜索特定字段

回答

相關問題