角度:在包含外部数据的ng重复上搜索过滤器

Angular: search filter on ng-repeat containing external data

本文关键字：搜索 过滤器 ng 包含外 数据 角度      更新时间：2023-09-26

建筑物有代码。示例：主厅的代码是"MNH"

房间的数字来自建筑物的代码。示例："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"。

我对 angular 很陌生，所以我的问题主要是我不知道在这个上面谷歌搜索什么。理想情况下，我想保留单个搜索框，我还想将建筑代码和数字保留在同一列中。

需要自定义过滤器？

有什么帮助吗？

编辑：

所以，在控制器中，我只是遍历房间并输入建筑规范。

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

不优雅？有没有更好的方法？

通常，最好尽可能避免使用筛选器，因为它们可以在每个摘要上运行，即使列表或筛选条件未更改也是如此。相反，每当筛选条件更改时，调用控制器函数以手动为要绑定到的视图创建新的筛选列表。这允许您使用您喜欢的任何逻辑。

然后，基本结构变为：

<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 节点（如果更改后仍在集合中），从而在集合更改时提高ng-repeat的性能。在这种情况下，对于每个项目的唯一标识属性，.id是一个不错的选择。

相关文章：