I'm trying to preselect a item in the list which is generated by ng-options directive. Could someone please tell me whats happening in the plunker?
<head>
<script src=".0.6/angular.min.js"></script>
<script>
function MyCntrl($scope) {
$scope.prop = {
"type": "select",
"name": "Service",
"values": [{
'name': "Service 1"
}, {
'name': "Service 2"
}, {
'name': "Service 3"
}, {
'name': "Service 4"
}]
};
$scope.selected1 = $scope.prop.values[1]
$scope.selected2 = {
"name": "Service 2"
}
}
</script>
</head>
<body>
<div ng-controller="MyCntrl">
Works <br>
<select ng-model="selected1" ng-options="v.name for v in prop.values">
</select> {{selected1}} <br>
Does not work. Why? <br>
<select ng-model="selected2" ng-options="v.name for v in prop.values">
</select>
{{selected2}}
</div>
</body>
</html>
I'm trying to preselect a item in the list which is generated by ng-options directive. Could someone please tell me whats happening in the plunker?
http://plnkr.co/edit/GTnR76HEnB5NxQRe484m?p=preview
<head>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
function MyCntrl($scope) {
$scope.prop = {
"type": "select",
"name": "Service",
"values": [{
'name': "Service 1"
}, {
'name': "Service 2"
}, {
'name': "Service 3"
}, {
'name': "Service 4"
}]
};
$scope.selected1 = $scope.prop.values[1]
$scope.selected2 = {
"name": "Service 2"
}
}
</script>
</head>
<body>
<div ng-controller="MyCntrl">
Works <br>
<select ng-model="selected1" ng-options="v.name for v in prop.values">
</select> {{selected1}} <br>
Does not work. Why? <br>
<select ng-model="selected2" ng-options="v.name for v in prop.values">
</select>
{{selected2}}
</div>
</body>
</html>
2 Answers
Reset to default 8Bijay Rai's statement is correct but not full answer.
ngOption has rather plicated expressions and you should bother to examine documentation. If you change the way the option's object is being tracked you can avoid using same object by reference as stated. For example, use select as pattern
<select ng-model="selected2" ng-options="v.id as v.name for v in prop.values">
</select>
Then you can simply assign selected like this:
$scope.selected2 = 3;
Updated plunkr
$scope.prop = {
"type": "select",
"name": "Service",
"values": [{
'name': "Service 1"
}, {
'name': "Service 2"
}, {
'name': "Service 3"
}, {
'name': "Service 4"
}]
};
ng-options getting data from prop.values.... so selected1 is working cause it is predefined as $scope.prop.values[1]
whereas selected2 is not referring to data inside prop.values.....