How To Bind DropDownList In AngularJS

In this article, we will learn about how we can bind DropDownList in AngularJS.

Binding a DropDownList Using ng-repeat

If you want to bind a DropDownList in AngularJS, you should use the ng-repeat directive:

Example

Open the Example1.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>Bind DropDownList:</p>
        <select ng-model="ddlName">
            <option ng-repeat="x in data" value="{{x.name}}">{{x.name}}</option>
        </select>
        {{ddlName}}
    </div>
    <script>
        angular.module('myApp', []).controller('myCtrl', function ($scope) {
            $scope.data = [
                { name: 'HTML', descr: 'Hypertext Markup Language' },
                { name: 'CSS', descr: 'Cascading Style Sheets' },
                { name: 'JS', descr: 'JavaScript' },
                { name: 'SQL', descr: 'Structured Query Language' },
            ];
        });
    </script>
</body>
</html>

The ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a DropDownList.

The ng-repeat directive has limitations, that the selected value must be a string.

Output:

Binding a DropDownList Using ng-options

If you want to bind a DropDownList, based on an object or an array in AngularJS, you should use the ng-options directive:

Example

Open the Example2.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>Bind DropDownList:</p>
        <select ng-model="ddlData" ng-options="x.name for x in data"></select>
        <p>You Selected: {{ddlData.name}}</p>
        <b>{{ddlData.descr}}</b>
    </div>
    <script>
        angular.module('myApp', []).controller('myCtrl', function ($scope) {
            $scope.data = [
                { name: 'HTML', descr: 'Hypertext Markup Language' },
                { name: 'CSS', descr: 'Cascading Style Sheets' },
                { name: 'JS', descr: 'JavaScript' },
                { name: 'SQL', descr: 'Structured Query Language' },
            ];
        });
    </script>
</body>
</html>

The ng-options directive was made especially for filling a DropDownList with options, and has at least one important advantage:

DropDownList made with ng-options allows the selected value to be an object, while DropDownList made from ng-repeat has to be a string.

When the selected value is an object, your application can be more flexible and it can hold more information.

Output:

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories