Skip to content
Related Articles

Related Articles

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=
  </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=
</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 arrow_drop_up
Recommended Articles
Page :