Угловой: поисковый фильтр на ng-повторе, содержащий внешние данные

Question

Здания имеют коды. Пример: код главного зала «MNH»

Номера имеют номера, которые производятся из кода здания. Пример: «MNH-101»

В базе данных код прикреплен к зданию , а не комнате. Номер просто имеет идентификатор здания как внешний ключ.

Итак, как я могу создать таблицу, содержащую комнаты, написанные как [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 ».

Я довольно новичок в угловом, поэтому моя проблема в основном заключается в том, что я не знаю, что делать с Google на этом. В идеале я хочу сохранить единственное поле поиска, и я также хочу сохранить код здания и номер в том же столбце.

Нужный вам фильтр?

Любая помощь?

EDIT:

Так, в контроллере, я просто итерация через комнату и засунул в коде здания.

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

Не элегантный? Есть ли способ лучше?

Answer 1

Как правило, лучше избегать фильтров, если вы можете, поскольку они могут запускаться на каждом дайджесте, даже если критерии списка или фильтра не изменились. Вместо этого, всякий раз, когда изменяются критерии фильтра, вызовите функцию контроллера, чтобы вручную создать новый отфильтрованный список для привязки вида. Это позволяет использовать любую логику, которая вам нравится.

Базовая структура становится:

<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) 
    }); 
}; 

Точные критерии фильтра было оставлено в качестве упражнения для вас.

Обратите внимание, что я использовал track by в выражении ng-repeat. Это хорошая практика, так как она улучшает производительность ng-repeat всякий раз, когда коллекция изменяется, позволяя ей повторно использовать существующий узел DOM для данного элемента в коллекции, если он все еще находится в коллекции после изменения. В этом случае .id является хорошим выбором для уникальной идентификации для каждого элемента.