Drop-down menus are present on websites all over. They are used to pull all the pages in a particular category together in one organized element. AngularJS select boxes to let us create drop-down lists based on the items in an array or an object.
To create drop-down lists, both the ng-repeat and ng-options can be used. In this blog, we will discuss the AngularJS select boxes.
AngularJS Select Boxes Using Ng Options
The ng-options directive creates drop-down lists based on objects or an array in AngularJS.
Syntax
The syntax for ng-options is given below.
<select ng-options="array expression"></select>
Parameter values
Value
Description
array expression
An expression to select the specified parts of an array to fill the select element.
Legal expressions:
label for value in an array.
select as a label for value in an array.
label group by group for value in an array.
label disable when disabled for value in an array.
label the group by group for value in array track by expression.
label disable when disabled for value in array track by expression.
label for value in array | orderBy expression track by expression.
Let us see a code example for the ng-options directive.
Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="dropDown" ng-controller="control">
<select>
<!-- In this code, we have used the ng-repeat directive. The ng-repeat directive repeats a set of HTML a given number of times.-->
<option ng-repeat="x in fruits">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('dropDown', []);
app.controller('control', function($scope) {
$scope.fruits = ["Apple", "Oranges", "Banana"];
});
</script>
</body>
</html>
Output
AngularJS Select Boxes Using Ng-Repeat
The ng-repeat directive repeats a set of HTML a given number of times. The set of HTML will be repeated once per item in a collection.
Syntax
The syntax for ng-repeat is given below.
<element ng-repeat="expression"> </element>
Parameter values
Value
Description
Expression
An expression that specifies how to loop the collection.
Legal Expression examples:
abc in records
(key, value) in myObj
abc in records track by $id(x)
Let us see a code example for the ng-repeat directive.
Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="dropDown" ng-controller="control">
<select>
<!-- In this code, we have used the ng-repeat directive. The ng-repeat directive repeats a set of HTML a given number of times.-->
<option ng-repeat="x in fruits">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('dropDown', []);
app.controller('control', function($scope) {
$scope.fruits = ["Apple", "Oranges", "Banana"];
});
</script>
</body>
</html>
Output
Limitation of Ng-Repeat
The ng-repeat directive's limitation is that the selected value must be a string. Let's see a code example for this.
Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="Cntrl">
<p>Select a fruit:</p>
<select ng-model="selectedFruit">
<option ng-repeat="x in fruits" value="{{x.fruit}}">{{x.fruit}}</option>
</select>
<h1>Choice: {{selectedFruit}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Cntrl', function($scope) {
$scope.fruits = [
{fruit : "Apple", color : "green"},
{fruit : "Banana", color : "yellow"},
{fruit : "Orange", color : "orange"},
{fruit : "Strawberry", color : "red"}
];
});
</script>
</body>
</html>
Output
Now let's see an example using the ng-options directive. We can observe that we can select an object value using ng-options. Let's see the code for this. Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="cntrl">
<select ng-model="selectedFruit" ng-options="x.name for x in fruits">
</select>
<h1>Choice: {{selectedFruit.name}}</h1>
<p>Fruit color: {{selectedFruit.color}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('cntrl', function($scope) {
$scope.fruits =[
{fruit : "Apple", color : "Green"},
{fruit : "Grape", color : "Violet"},
{fruit : "Strawberry", color : "Red"},
{fruit : "Orange", color : "Orange"}
];
});
</script>
</body>
</html>
Output
AngularJS Select Box with Default Value
There will be instances where we want to display a value from the drop-down list as a default. Let us see how we can do this through a code example.
Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="default" ng-controller="selectbox">
<div>
<select name="users" ng-model="userSelect">
<option value="">--Select Fruit--</option>
<option ng-repeat="option in arrlist" value="{{option.fruitID}}">{{option.name}}</option>
</select>
</div>
<script>
var app = angular.module('default', []);
app.controller('selectbox', function ($scope) {
$scope.arrlist = [{
"fruitID": 1,
"name": "Apple"
},
{
"fruitID": 2,
"name": "Banana"
},
{
"fruitID": 3,
"name": "Orange"
}];
// With the following code, we have specified the default value in the drop-down.
$scope.userSelect = "2";
});
</script>
</body>
</html>
Output
Difference Between Default, Ng-Repeat, and Ng-Option
Default - The select option in AngularJS is a form control option. It is mainly used for selecting a particular value from the given set of options. The default option always displays one selected item on the header.
Ng-Repeat - The ng-repeat directive causes a set of HTML to be repeated a specified number of times. The HTML will be repeated once for each collection item.
The ng-repeat directive is ideal for creating an HTML table with one table row for each object and one table data for each object property if you have a collection of items.
Ng-Options - This directive gives more flexibility then ng-repeat directive. It is used for creating a list of options. The ng-option directive fills the dropdown select boxes list using arrays.
Frequently asked questions
What is AngularJS?
Angular is an open-source web framework based on Javascript. It is mainly used for developing single-page applications.
What is AngularJS select box?
AngularJS select boxes to let us create drop-down lists based on the items present in an array or an object.
What are the directive to create select boxes?
In AngularJS, select boxes can be created using either ng-repeat or ng-option.
Where can we use AngularJS select boxes?
AngularJS select boxes are used to create a drop-down selection of options. It is helpful when making an application or asking questions with a range of values.
How is ng-repeat unique compared to ng-options?
The ng-repeat directive instantiates a set of HTML code for each item in an array. The ng-options directive was especially used for filling a drop-down list with options.
Conclusion
In this blog, we have talked about the AngularJS Select Boxes. We have seen how AngularJS select boxes create drop-down lists based on the items present in an array or an object.
Excited to learn more about Angular. Here are a few related articles you can refer to:
46+ registered 