如何过滤选择元素的 ng-options 中的数据？答案

【问题标题】：How to filter data in ng-options of a select element?如何过滤选择元素的 ng-options 中的数据？
【发布时间】：2017-09-26 14:48:34
【问题描述】：

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

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 个元素。

【问题讨论】：

标签： javascript angularjs angular angularjs-filter ng-options

【解决方案1】：

试试这个：

    <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

【讨论】：

这是最快的修复方法，非常感谢。我想我完全误解了这个概念。
第二个选择总是有一个空白默认值。无论如何要掩盖这一点，您知道默认的第一个选项很好。顺便说一下，我尝试了 ng-model 。没用！

【解决方案2】：

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

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

使用自定义filter，您可以查看Building Custom AngularJS Filters tutorial 了解更多详细信息，这就是您的过滤器r.roomNumber for r in rooms | filter:tenant.hostel._id。
创建一个函数来过滤 rooms 并将其附加到您的第一个 select 选项的 ng-change 事件，这将在选择 hostel 时过滤 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。

【讨论】：

非常感谢@chsdk！