AngularJS ng-options to Bind Dropdown List with Array List Example

Here we will learn what is ng-options directive in angularjs, use of ng-options directive, how to use ng-options to bind dropdown list in angularjs and use ng-options to set dropdown list default selected value in angularjs with examples.

AngularJS ng-options Directive to Bind Select / Dropdown List

In angularjs ng-options directive is used to generate list of options and bind to select or dropdown list. In angularjs ng-options directive will use array list to bind dropdown list option values.

 

Generally in angularjs most of the cases we use ng-repeat directive to achieve same functionality of ng-options but ng-options will reduce memory usage and increase speed of application by not creating scope for every repeat instance when compared with ng-repeat directive.

 

While using ng-options in angularjs optionally we need to define one hard coded <option> element with value as empty string in <select> element. This hard coded empty string value will represent starting value of dropdown list.

Syntax of ng-options in AngularJS to Bind Dropdown List

Following is the syntax of using ng-options directive in angularjs to bind dropdown list.

 

<select ng-options="array expression">

<option value="">--Select--</option>

</select>

AngularJS Bind Dropdown List using ng-options Example

Following is the example of binding dropdown list using ng-options directive.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-options to bind dropdown list example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('ngoptionsApp', []);

app.controller('ngoptionsCtrl', function ($scope) {

$scope.arrlist = [{

"userid": 1,

"name": "Suresh"

}, {

"userid": 2,

"name": "Rohini"

}, {

"userid": 3,

"name": "Praveen"

}];

});

</script>

</head>

<body  ng-app="ngoptionsApp" ng-controller="ngoptionsCtrl">

<div>

<h3>AngularJS ng-options to bind dropdown list Example</h3>

<select name="users" ng-options="user.name for user in arrlist" ng-model="userselected">

<option value="">--Select User--</option>

</select><br /><br />

<span>User Name: {{userselected.name}}, UserId: {{userselected.userid}}</span>

</div>

</body>

</html>

If you observe above example we are binding array to dropdown list using ng-options directive and getting selected user details in angularjs. Now we will run and see how to output will be.

Output of AngularJS Bind Dropdown List using ng-options

Following is the result of binding array to dropdown list using ng-options in angularjs applications.

 

Angularjs bind dropdown list using ng-options directive example result or output

AngularJS ng-options to set Default Value of Dropdown List

Following is the example to set default selected value of dropdown list while binding using ng-options.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-options to Set Default Value to Dropdown List Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('ngoptionsApp', []);

app.controller('ngoptionsCtrl', function ($scope) {

$scope.arrlist = [{

"userid": 1,

"name": "Suresh"

}, {

"userid": 2,

"name": "Rohini"

}, {

"userid": 3,

"name": "Praveen"

}];

$scope.userselected = $scope.arrlist[2];

});

</script>

</head>

<body  ng-app="ngoptionsApp" ng-controller="ngoptionsCtrl">

<div>

<h3>AngularJs ng-options to Set Default Value</h3>

<select name="users" ng-options="user.name for user in arrlist" ng-model="userselected">

<option value="">--Select User--</option>

</select><br /><br />

<span>User Name: {{userselected.name}}, UserId: {{userselected.userid}}</span>

</div>

</body>

</html>

If you observe above example we assigned default value to ng-model object and by using this value automatically default value will set to dropdown list.

Output of AngularJS Set Default Value to Dropdown List

Following is the result of setting default value to dropdown list using ng-options in angularjs.

 

AngularJS Set Default Value to Dropdown List using ng-options Example Output or Result

 

This is how we can use ng-options directive in angularjs to bind dropdown list values and set default selected value of dropdown list.