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:
