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: