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

Question

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

HTML:

    <!-- 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 -->

数据：

房间：

{
  "rooms": [
    {
      "_id": "590312ded3cd574e753833ae",
      "hostel": {
        "_id": "5902d6efa6aeca127a76d993",
        "category": "5902e9dc9b42c32bdacdc55f",
        "name": "New Hostel",
        "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
        "description": "Vel ei vide nulla conclusionemque, ut ius dolore vituperatoribus, iisque prodesset no mel. Pri id populo ceteros molestie, audiam evertitur ne nec. Vix ne doctus volutpat omittantur, at nominavi accommodare est. Minimum persequeris id per, ferri magna utinam pri id, per ubique scripta et",
        "phone": "2020202020",
        "__v": 0,
        "_created": "2017-04-28T05:36:51.520Z",
        "_creator": {
          "_username": "Administrator",
          "_id": "58e8a1234b82b216404827d8"
        },
        "warden": {
          "name": "James Harden",
          "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
          "phone": "2020202020"
        }
      },
      "floor": "Ground Floor",
      "roomNumber": "201",
      "numBeds": 3,
      "cost": 1000,
      "__v": 0,
      "_created": "2017-04-28T10:00:33.793Z",
      "_tenants": [

      ],
      "numOccupied": 0
    },
    {
      "_id": "5903133271e4ed4ec3cee1c8",
      "hostel": {
        "_id": "5902d6efa6aeca127a76d993",
        "category": "5902e9dc9b42c32bdacdc55f",
        "name": "New Hostel",
        "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
        "description": "Vel ei vide nulla conclusionemque, ut ius dolore vituperatoribus, iisque prodesset no mel. Pri id populo ceteros molestie, audiam evertitur ne nec. Vix ne doctus volutpat omittantur, at nominavi accommodare est. Minimum persequeris id per, ferri magna utinam pri id, per ubique scripta et",
        "phone": "2020202020",
        "__v": 0,
        "_created": "2017-04-28T05:36:51.520Z",
        "_creator": {
          "_username": "Administrator",
          "_id": "58e8a1234b82b216404827d8"
        },
        "warden": {
          "name": "James Harden",
          "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
          "phone": "2020202020"
        }
      },
      "floor": "Ground Floor",
      "roomNumber": "201",
      "numBeds": 3,
      "cost": 1000,
      "__v": 0,
      "_created": "2017-04-28T10:02:21.487Z",
      "_tenants": [

      ],
      "numOccupied": 0
    },
    {
      "_id": "590313555c13a24ef493721b",
      "hostel": {
        "_id": "5902d6efa6aeca127a76d993",
        "category": "5902e9dc9b42c32bdacdc55f",
        "name": "New Hostel",
        "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
        "description": "Vel ei vide nulla conclusionemque, ut ius dolore vituperatoribus, iisque prodesset no mel. Pri id populo ceteros molestie, audiam evertitur ne nec. Vix ne doctus volutpat omittantur, at nominavi accommodare est. Minimum persequeris id per, ferri magna utinam pri id, per ubique scripta et",
        "phone": "2020202020",
        "__v": 0,
        "_created": "2017-04-28T05:36:51.520Z",
        "_creator": {
          "_username": "Administrator",
          "_id": "58e8a1234b82b216404827d8"
        },
        "warden": {
          "name": "James Harden",
          "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
          "phone": "2020202020"
        }
      },
      "floor": "Ground Floor",
      "roomNumber": "201",
      "numBeds": 3,
      "cost": 1000,
      "__v": 0,
      "_created": "2017-04-28T10:02:58.857Z",
      "_creator": {
        "_id": "58e8a1234b82b216404827d8",
        "_username": "Administrator"
      },
      "_tenants": [

      ],
      "numOccupied": 0
    },
    {
      "_id": "590319882326be569b6cca9c",
      "hostel": {
        "_id": "58f212b655d9d353b25e742a",
        "name": "Some Hostel",
        "__v": 0,
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. At ego quem huic anteponam non audeo dicere; Ad eas enim res ab Epicuro praecepta dantur",
        "phone": "8095478346",
        "address": "22d - 6 - 4, Ramakrishnapuram",
        "category": "5901b735f1b274473e710c66",
        "_created": "2017-04-15T12:31:41.923Z",
        "_creator": {
          "_username": "Administrator",
          "_id": "58e8a1234b82b216404827d8"
        },
        "warden": {
          "name": "Warned Marlin Monroe",
          "address": "22d - 6 - 4, Ramakrishnapuram",
          "phone": "8095478346"
        }
      },
      "floor": "Test Floor",
      "roomNumber": "Test Number",
      "numBeds": 2,
      "cost": 2000,
      "__v": 0,
      "_created": "2017-04-28T10:25:50.825Z",
      "_creator": {
        "_id": "58e8a1234b82b216404827d8",
        "_username": "Administrator"
      },
      "_tenants": [

      ],
      "numOccupied": 0
    },
    {
      "_id": "59030943c9bf7846386f4da1",
      "__v": 0,
      "cost": 0,
      "numBeds": 0,
      "roomNumber": "000",
      "floor": "Unknown Floor",
      "hostel": {
        "_id": "58f212b655d9d353b25e742a",
        "name": "Some Hostel",
        "__v": 0,
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. At ego quem huic anteponam non audeo dicere; Ad eas enim res ab Epicuro praecepta dantur",
        "phone": "8095478346",
        "address": "22d - 6 - 4, Ramakrishnapuram",
        "category": "5901b735f1b274473e710c66",
        "_created": "2017-04-15T12:31:41.923Z",
        "_creator": {
          "_username": "Administrator",
          "_id": "58e8a1234b82b216404827d8"
        },
        "warden": {
          "name": "Warned Marlin Monroe",
          "address": "22d - 6 - 4, Ramakrishnapuram",
          "phone": "8095478346"
        }
      },
      "_created": "2017-04-28T09:20:02.382Z",
      "_tenants": [

      ],
      "numOccupied": 0
    }
  ]
}

和宿舍：

{
  "hostels": [
    {
      "_id": "5902d6efa6aeca127a76d993",
      "category": "5902e9dc9b42c32bdacdc55f",
      "name": "New Hostel",
      "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
      "description": "Vel ei vide nulla conclusionemque, ut ius dolore vituperatoribus, iisque prodesset no mel. Pri id populo ceteros molestie, audiam evertitur ne nec. Vix ne doctus volutpat omittantur, at nominavi accommodare est. Minimum persequeris id per, ferri magna utinam pri id, per ubique scripta et",
      "phone": "2020202020",
      "__v": 0,
      "_created": "2017-04-28T05:36:51.520Z",
      "_creator": {
        "_username": "Administrator",
        "_id": "58e8a1234b82b216404827d8"
      },
      "warden": {
        "name": "James Harden",
        "address": "#18-6-7,4th Line,Kedareswar Pet,VIJAYAWADA – 520003",
        "phone": "2020202020"
      }
    },
    {
      "_id": "58f212b655d9d353b25e742a",
      "name": "Some Hostel",
      "__v": 0,
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. At ego quem huic anteponam non audeo dicere; Ad eas enim res ab Epicuro praecepta dantur",
      "phone": "8095478346",
      "address": "22d - 6 - 4, Ramakrishnapuram",
      "category": "5901b735f1b274473e710c66",
      "_created": "2017-04-15T12:31:41.923Z",
      "_creator": {
        "_username": "Administrator",
        "_id": "58e8a1234b82b216404827d8"
      },
      "warden": {
        "name": "Warned Marlin Monroe",
        "address": "22d - 6 - 4, Ramakrishnapuram",
        "phone": "8095478346"
      }
    }
  ]
}

它们的 ng-model 值设置为各自数组的第 0 个元素。

Answer 1

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

对于你的情况，你有两个选择：

使用自定义 filter, you can check Building Custom AngularJS Filters tutorial 了解更多详情，这就是您的过滤器 r.roomNumber for r in rooms | filter:tenant.hostel._id。
创建一个函数来过滤 rooms 并将其附加到您的第一个 select 选项的 ng-change 事件，这将在选择 [=18] 时过滤 rooms =].

这是您的代码的样子：

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 中的数据？

How to filter data in ng-options of a select element?

javascript

angularjs

angular

angularjs-filter

ng-options