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搜索过滤器

回答

相关问题