Reputation: 12710
I have a select box that will not select the option that is bound to ng-model
or ng-select
, instead it selects the hard coded value initially but when I select another it just overriders my selection with the last item in the list. I have stripped it down to it bare minimum and still cannot see
this is my html page:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div ng-app="myapp">
<div ng-controller="myController">
<select ng-model="freezeCalendar_model" ng-options="freezeCalender.calendarID as freezeCalender.name for freezeCalender in freezeCalendarList"></select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
and this is my script.js:
var app = angular.module("myapp", ["controllers"]);
var controllers = angular.module("controllers", []);
controllers.controller('myController', function ($scope) {
$scope.freezeCalendar_model = 162;
$scope.freezeCalendarList = [{
"id": 104,
"name": "ABC"
}, {
"id": 202,
"name": "123"
}, {
"id": 121,
"name": "xyz"
}, {
"id": 224,
"name": "hello"
}, {
"id": 162,
"name": "bam"
}, {
"id": 164,
"name": "boom"
}];
});
I also Have a plnkr here This is frustrating me a lot because I have a lot of selects working fine and I cannot understand what is wrong with this particular one.
Help would be greatly appreciated
Upvotes: 0
Views: 321
Reputation: 8925
You're not referencing the id
correctly, it appears. Works fine for me after making that change.
Change:
freezeCalender.calendarID as freezeCalender.name
To:
freezeCalender.id as freezeCalender.name
Upvotes: 2