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.
<!DOCTYPE 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">GeeksforGeeks</h1>
<h3>ng-option Directive</h3>
<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.
<!DOCTYPE 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>GeeksforGeeks</h1>
<h3>ng-repeat Directive</h3>
<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:
