AngularJS Select Boxes

Last Updated : 06 Jan, 2023

The Select Boxes in AngularJS can be utilized to create dropdown lists, that are based on the objects or an array. The Select box can be created in 2 ways, i.e., either by using the ng-options directive that is used to build and bind HTML elements with options to model property or by using the ng-repeat directive that is used to repeat a set of HTML code for a number of times or once per item in a collection of items, & is mostly used on arrays and objects.

We will understand both the approaches for creating the Select box in AngularJS with the help of examples.

ng-options: For creating a dropdown list based on array items, it will be preferred to use ng-options directives. This directive is mainly used for filling a dropdown list with options.

Example 1: This example illustrates the creation of the select box using the ng-options directive.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
    <style> 
        body { 
            text-align: center; 
            font-family: sans-serif; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>ng-option Directive</h3> 
    <div ng-app="gfg" ng-controller="myCtrl"> 
        <p>Select the item from the List:</p> 
        <select ng-model="selectedName" 
                ng-options="x for x in names"> 
        </select> 
    </div> 
    <p>Dropdown List.</p> 
  
    <script> 
        var app = angular.module('gfg', []); 
        app.controller('myCtrl', function ($scope) { 
            $scope.names = 
                ["Programming",  
                 "DSA",  
                 "Competitive Programming"]; 
        }); 
    </script> 
</body> 
</html>

Output:

ng-repeat: We can implement the same dropdown list using the ng-repeat directive. Dropdowns from the ng-repeat need to be an array. This directive can be used to call multiple times to repeat the block of HTML code for each item in an array.

Example 2: This example describes the creation of the Selection box using the ng-repeat directive.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
    <style> 
        body { 
            text-align: center; 
            font-family: sans-serif; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>ng-repeat Directive</h3> 
    <div ng-app="gfg" ng-controller="myCtrl"> 
        <select> 
            <option ng-repeat="x in names"> 
                {{x}} 
            </option> 
        </select> 
    </div> 
    
    <p>Dropdown List.</p> 
  
    <script> 
        var app = angular.module('gfg', []); 
        app.controller('myCtrl', function ($scope) { 
            $scope.names = ["DSA",  
                            "Programming Language",  
                            "Competitive Programming"]; 
        }); 
    </script> 
</body> 
</html>