Blog- AngularJS-select

by ramandv

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<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>

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"}
    ];
 
}