AngularJS Select Boxes

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


<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">GeeksforGeeksh1>
    <h3>ng-option Directiveh3>
    <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


<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>GeeksforGeeksh1>
    <h3>ng-repeat Directiveh3>
    <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:

Explore