So, I have a select input within a angular repeated item. I want to use a button to assign rooms to a person. As well as maintain if a person has rooms selected, it will show that it is already assign within the selection input.
Here my Firebase Data:
{
"-JLtuRmYiTDLTnZPj" : {
"last_name" : "NameOne",
"person_id" : 1,
"is_in" : false
},
"-JLtuRBlyWhHV28zd" : {
"last_name" : "NameTwo",
"person_id" : 2,
"is_in" : false
},
"-JLtuQxlMn25APuKT" : {
"last_name" : "NameThree",
"person_id" : 3,
"is_in" : false
}
}
Here is my code:
<table>
<tbody>
<tr ng-repeat="(name, person) in people | orderBy: 'doctor_id'" ng-model="person">
<td>{{person.person_id}}</td>
<td>{{person.last_name}}</td>
<td><strong>{{person.is_in}}</strong></td>
<td>Assign Rooms: <select multiple class="form-control" ng-model="person.room_id" ng-options="r.room_id as r.name for (key, r) in rooms"></select></td>
<td><button type="button" href="" class="btn btn-primary" ng-click="assignRooms(name)">Assign Rooms</button></td>
</tr>
</tbody>
</table>
And Finally my JS:
angular.module('app', ['ngRoute', 'firebase']);
$scope.people = $firebase(new Firebase("https://<FB-NAME>.firebaseio.com/dev/0/people"));
$scope.rooms = $firebase(new Firebase("https://<FB-NAME>.firebaseio.com/dev/0/rooms"));
//Assigns Rooms to each doctor.
$scope.assignRooms = function(name) {
$scope.people.$child(name).$update({
"room_id": $scope.person.room_id,
"is_in": true
});
}
The app is being called correctly. I can see the scopes when I use Angular JS Batarang. When I click the Assign Rooms button I get the error:
Cannot read property 'room_id' of undefined
from this: $scope.person.room_id.
I am sure it's something obvious I am missing. But any help is greatly appreciated.
Thank You!