Issue
So I have a controller like this
app.controller("ReservationCtrl", function($scope) {
$scope.rooms = [{id: 1, name: "Room 1"}, {id: 2, name: "Room 2", }];
$scope.reservation = {id: 1, time: "9AM", room: {id: 2, name: "Room 2"}};
});
A view that looks like this:
<select ng-model="reservation.room" ng-options="room as room.name for room in rooms"></select>
The problem is that the select box won't bind to the correct room unless I say
$scope.reservation.room = $scope.rooms[1];
This is rather inconvenient for development as the room is not the only field on the reservation
model that needs to be bound to a select box. How can I apply the binding without doing this extra step?
Also, the binding breaks again if I do something like
$http.get("/reservation/2").success(function(data) { $scope.reservation = angular.copy(data); });
Solution
So it seems the key to this problem is the track by
clause in the ng-options
directive. See my updated fiddle
As you will see, the whole model is being updated and not just its ID. The documentation says that select as
and track by
were not meant to be used together, but the example they used to illustrate this is a bit different from mine.
Since I've received no feedback from the official Angular channels on this matter to date, I'm gonna mark this as solved and move on.
Thanks for the help everyone.
Answered By - kshep92
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.