AngularJS | Select Boxes

Last Updated : 07 May, 2019

ng-options:
For creating dropdown list based on array items, should use ng-options directives:
Example-1:

<!DOCTYPE html> 
<html> 
<script src= 
 "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
  </script> 
  
<body> 
    <center> 
        <h2 style="color:green">GeeksforGeeks</h2> 
        <div ng-app="gfg" ng-controller="myCtrl"> 
  
            <select ng-model="selectedName" 
                    ng-options="x for x in names"> 
            </select> 
  
        </div> 
  
        <script> 
            var app = angular.module('gfg', []); 
            app.controller('myCtrl', function($scope) { 
                $scope.names =  
                  ["car", "cricket", "metro"]; 
            }); 
        </script> 
  
        <p>Dropdown List.</p> 
    </center> 
</body> 
  
</html> 

Output:

ng-repeat:
Make same dropdown list using ng-repeat directives.
Dropdowns from ng-repeat has to be a string.
Example-2:

<!DOCTYPE html> 
<html> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
</script> 
  
<body> 
    <center> 
        <h2 style="color:green">GeeksforGeeks</h2> 
        <div ng-app="gfg" ng-controller="myCtrl"> 
  
            <select> 
                <option ng-repeat="x in names">{{x}} 
                </option> 
            </select> 
  
        </div> 
  
        <script> 
            var app = angular.module('gfg', []); 
            app.controller('myCtrl', function($scope) { 
                $scope.names = ["cric", "lion", "gfg"]; 
            }); 
        </script> 
  
        <p>Dropdown List.</p> 
    </center> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles