Hi there guys I am trying to filter some data in the ng-options but it isn't working as expected. I have a group of hostels from which user will select one and then selects from rooms.
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 -->
Data:
Rooms:
{
"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
}
]
}
and hostel:
{
"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"
}
}
]
}
Their ng-model values are set to the 0th elements of respective arrays.
Try this:
<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 -->
Note that the filter will only work over an array.. So both hostels and rooms should be something.hostels and something.rooms