Question

大家好，我正在尝试过滤ng-options中的一些数据，但它没有按预期工作。我有一组旅馆，用户将从中选择一个，然后从房间中选择。

HTML：

motels.clear();
for(DataSnapshot snapshot : snap.getChildren()) {
    Motel motel =  snap.getValue(Motel.class);
    motels.add(motel);
}
adapter.notifyDataSetChanged();

数据：

房间：

motels.clear();
Motel motel =  dataSnapshot.getValue(Motel.class);
motels.add(motel);
adapter.notifyDataSetChanged();

和宿舍：

    <!-- Hostel Select -->
    <div class="form-group">
      <select id="hostelName" ng-model="tenant.hostel"
        ng-options="h.name for h in hostels" class="form-control">
      </select>
    </div><!-- ./form-group -->


    <!-- Room Select -->
    <div class="form-group" ng-show="::tenant.hostel">
      <select id="roomNum" ng-model="tenant.room"
        ng-options="r.roomNumber for r in rooms | filter: { hostel._id : tenant.hostel._id }" 
        class="form-control">
      </select>
    </div><!-- ./form-group -->

他们的ng模型值被设置为各个数组的第0个元素。

Answer 1

问题是您使用的过滤器是错误的，filter: { hostel._id : tenant.hostel._id }不是正确的过滤器。

在您的情况下，您有两个选择：

使用自定义filter，您可以查看Building Custom AngularJS Filters tutorial以获取更多详细信息，这是您的过滤器应该r.roomNumber for r in rooms | filter:tenant.hostel._id。
创建一个功能来过滤rooms并将其附加到您的第一个ng-change选项的select事件中，这将在选定的rooms时过滤hostel

下面有＆＃39;您的代码将如何显示：

<强> HTML：

<!-- Hostel Select -->
<div class="form-group">
  <select ng-change="filterRooms()" id="hostelName" ng-model="tenant.hostel" ng-options="h.name for h in hostels" class="form-control"></select>
</div>
<!-- ./form-group -->
<!-- Room Select -->
<div class="form-group" ng-show="tenant.hostel && (tenant.hostel !== '')">
  <select id="roomNum" ng-model="tenant.room" ng-options="r.roomNumber for r in filteredRooms" class="form-control"></select>
</div>
<!-- ./form-group -->

<强> JavaScript的：

$scope.rooms = roomData.rooms;
$scope.hostels = hostelData.hostels;
$scope.filteredRooms = [];
$scope.tenant = {
  hostel: '',
  room: ''
};

$scope.filterRooms = function() {
  $scope.filteredRooms = $scope.rooms.filter(function(room) {
    return room.hostel._id === $scope.tenant.hostel._id;
  });
};

<强>演示：

这是一个有效的Demo Plunker。

Answer 2

试试这个：

    <div class="form-group">
  <select id="hostelName" ng-model="tenant.hostel"
    ng-options="h.name for h in hostels" class="form-control">
  </select>
</div><!-- ./form-group -->

<div>{{tenant.hostel._id}}</div>

<!-- Room Select -->
<div class="form-group" ng-show="tenant.hostel">
  <select id="roomNum" ng-model="tenant.room"
    ng-options="r.roomNumber for r in rooms | filter:tenant.hostel._id" 
    class="form-control">
  </select>
</div><!-- ./form-group -->

请注意，过滤器只适用于数组..所以宿舍和房间都应该是something.hostels和something.rooms

如何过滤select元素的ng-options中的数据？

2 个答案: