Skip to content
Related Articles

Related Articles

AngularJS Select Boxes

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

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=
    </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=
    </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>


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!