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:

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.