Angular：含有外部數據的ng-repeat搜索過濾器

建築物有代碼。例如：主廳的代碼是「MNH」Angular：含有外部數據的ng-repeat搜索過濾器

房間的編號來自建築物的代碼。例如：「MNH-101」

在數據庫中，代碼附加到大樓，而不是房間。房間只有建築物的ID作爲外鍵。

那麼，如何創建一個表格，其中包含編寫爲[Building Code]-[Room Number]的房間，同時仍然可以在房間的「完整」號碼上搜索：「MNH-101」？

到目前爲止，我有這樣的：

<form> 
    <input type="text" ng-model="searchRoom"> 
</form> 

<table class="table table-striped table-bordered"> 
    <tr ng-repeat="room in view.rooms|filter:searchRoom"> 
     <td> 
      <a ng-href="room/{{room.id}}"> 
       {{ view.building.code }}-{{ room.number }} 
      </a> 
     </td> 
    </tr> 
</table>

合併房間號碼顯示沒關係，我可以在房間搜索號，那就是「100」，但我不能在「搜索MNH 」。

我很新的角度，所以我的問題主要是，我不知道該怎麼谷歌。理想情況下，我想保留單個搜索框，並且還希望將建築代碼和編號保留在同一列中。

需要自定義過濾器嗎？

任何幫助？

編輯：

所以，在控制，我只是遍歷房間，並在建築規範猛。

for (var i = rooms.length; i--;) { 
    rooms[i].number = vm.building.code + "-" + rooms[i].number; 
}

不優雅？有沒有更好的辦法？

來源

2016-03-03 crowhill

如果此房間列表僅用於顯示目的，並且不保存回數據庫或任何其他內容，則可以根據需要創建包含視圖所需內容的列表。沒有強制要堅持後臺發送的格式。 – GregL

通常，儘可能避免使用過濾器，因爲它們可以在每個摘要上運行，即使列表或過濾條件沒有改變。相反，只要過濾條件發生變化，就調用控制器函數手動爲要綁定的視圖創建新的過濾列表。這允許你使用你喜歡的任何邏輯。

的基本結構就變成了：

<form> 
    <input type="text" ng-model="searchRoom" ng-change="view.roomFilterChanged(searchRoom)"> 
</form> 

<table class="table table-striped table-bordered"> 
    <tr ng-repeat="room in view.filteredRooms track by room.id"> 
     <td> 
      <a ng-href="room/{{room.id}}"> 
       {{ view.building.code }}-{{ room.number }} 
      </a> 
     </td> 
    </tr> 
</table>

而在你的控制器：

function RoomViewController() { 
    // (set this.rooms here) 
    this.filteredRooms = this.rooms; 
} 

RoomViewController.prototype.roomFilterChanged = function (filterText) { 
    this.filteredRooms = this.rooms.filter(function (room) { 
     // (filter criteria here) 
    }); 
};

確切的過濾標準已經作爲練習留給你。

請注意，我在ng-repeat表達式中使用了track by。這是一個很好的練習，因爲每當集合發生更改時，它都會提高性能，因爲如果該集合仍在更改後的集合中，則允許它重複使用集合中給定項目的現有DOM節點。在這種情況下，.id是每個項目唯一標識屬性的不錯選擇。

來源

2016-03-03 00:37:51 GregL

Angular：含有外部數據的ng-repeat搜索過濾器

回答

相關問題