The Angular js ng-options directive supports the following the possible options
for array data sources:
- label for value in array
- select as label for value in array
- label group by group for value in array
- select as label group by group for value in array
for object data sources:
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group for (key, value) in object
- select as label group by group for (key, value) in obj
The following simple JSFiddle shall helps you in understanding the usage of the above.
Javascript
function ControllerA($scope) {
$scope.optionsArray = [1,2,3,4,5];
$scope.optionsObject = {"India" : "IN" , "Singapore" : "SG", "Malaysia" : "MY"};
$scope.optionsGroup = [
{ "country" : "India" , "city" : "Chennai"},
{ "country" : "India" , "city" : "Mumbai"},
{ "country" : "India" , "city" : "Delhi"},
{ "country" : "India" , "city" : "Calcutta"},
{ "country" : "Singapore" , "city" : "Singapore"}
];
}
HTML
<div ng-controller="ControllerA" ng-app>
Simple Array as options<br/>
<select ng-options="value for value in optionsArray" ng-model="chosenA">
</select><br/>
chosenA = {{chosenA}}<br/>
<hr/>
Simple options<br/>
<select ng-options="value for (key, value) in optionsObject " ng-model="chosenO">
</select><br/>
chosenO = {{chosenO}}<br/>
<hr/>
Simple Object with key as value<br/>
<select ng-options="value as key for (key, value) in optionsObject " ng-model="chosenO1">
</select><br/>
chosenO1 = {{chosenO1}}<br/>
<hr/>
Options Group<br/>
<select ng-options="value.city group by value.country for value in optionsGroup" ng-model="chosenO2">
</select><br/>
chosenO2 = {{chosenO2}}<br/>
<hr/>
</div>
JsFiddle
http://jsfiddle.net/ramandv/zFtkR/
3 Responses to HTML SELECT element with angular data-binding