Question

建筑物有代码。示例：主厅的代码为“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”。

我对角度很新，所以我的问题主要在于我不知道该在谷歌上做什么。理想情况下，我想保留单个搜索框，我还想将建筑代码和数字保留在同一列中。

需要自定义过滤器吗？

任何帮助？

编辑：

所以，在控制器中，我只是在房间里进行了迭代，然后推进了建筑规范。

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。这是一个很好的实践，因为它可以在集合发生变化时通过允许它为集合中的给定项重用现有DOM节点来提高ng-repeat的性能，如果它在更改后仍然在集合中。在这种情况下，.id是每个项目唯一标识属性的不错选择。

Angular：搜索包含外部数据的ng-repeat的过滤器

1 个答案: