In this article I will explain with an example, how to use
AngularJS ng-repeat directive to populate (bind) HTML Select DropDownList with options.
The
JSON array will be used as data source to populate DropDownList with options.
Populating (Bind) HTML Select DropDownList with Options
HTML Markup
Inside the View, the following JS file is inherited.
1. angular.min.js
The HTML Markup consists of the following elements:
div – For applying ng-app and ng-controller AngularJS directives.
DropDownList – For displaying data.
The DropDownList element (SELECT) which will be populated from
JSON array using
ng-repeat directive.
A
JSON array has been created inside the controller and assigned to the
Fruits variable.
ng-repeat
The ng-repeat directive as the name suggests repeats the element based on the length of the collection specified.
The option element of DropDownList element (SELECT) element has been assigned with an ng-repeat directive to iterate to all items of the Fruits array.
The Id property is assigned to the value attribute and the Name property is set as inner HTML for the option element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Fruits = [{
Id: 1,
Name: 'Apple',
Selected: false
}, {
Id: 2,
Name: 'Mango',
Selected: true
}, {
Id: 3,
Name:'Orange',
Selected: false
}];
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<select>
<option value="0" label="Please Select"></option>
<option ng-repeat="fruit in Fruits" value="{{fruit.Id}}">
{{fruit.Name}}
</option>
</select>
</div>
The following screenshot displays the rendered HTML of DropDownList element (SELECT) populated using ng-repeat directive.
![AngularJS ng-repeat example: Populate (Bind) HTML Select DropDownList with Options]()
Populating HTML DropDownList Select with selected option
HTML Markup
Inside the View, the following JS file is inherited.
1. angular.min.js
The HTML Markup consists of the following elements:
div – For applying ng-app and ng-controller AngularJS directives.
DropDownList – For displaying data.
The DropDownList element (SELECT) which will be populated from
JSON array using
ng-repeat directive.
A
JSON array has been created inside the controller and assigned to the Fruits variable.
ng-repeat
The ng-repeat directive as the name suggests repeats the element based on the length of the collection specified.
The option element of DropDownList element (SELECT) element has been assigned with an ng-repeat directive to iterate to all items of the Fruits array.
The Id property is assigned to the value attribute and the Name property is set as inner HTML for the option element.
ng-selected
In order to set an option as selected, the ng-selected directive has been assigned to the option element of DropDownList element (SELECT) with a Boolean expression.
If the TRUE is set, then the particular option will be selected after populating the DropDownList element (SELECT).
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Fruits = [{
Id: 1,
Name: 'Apple',
Selected: false
}, {
Id: 2,
Name: 'Mango',
Selected: true
}, {
Id: 3,
Name: 'Orange',
Selected: false
}];
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<select>
<option value="0" label="Please Select"></option>
<option ng-repeat="fruit in Fruits" value="{{fruit.Id}}"
ng-selected="{{fruit.Selected == true }}">
{{fruit.Name}}
</option>
</select>
</div>
The following screenshot displays the rendered DropDownList element (SELECT) with selected option populated using ng-repeat directive.
![AngularJS ng-repeat example: Populate (Bind) HTML Select DropDownList with Options]()
Demo
Downloads
