AngularJS ng-options Directive
Last Updated :
01 Aug, 2022
The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill the dropdown list. It is supported by the <select> element.
Syntax:
<element ng-options="expression">
Content ...
</element>
Parameter value:
- expression: It selects the particular portion of an array to fill the selected element.
Example 1: This example implements the ng-options Directive to display the option element in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-options Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "text-align: center" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h3 >ng-options Directive</ h3 >
< div ng-controller = "geek"
ng-init = "StudentId=1" > Sorting Algorithms:
< select ng-model = "Sorting" ng-options="sort.name as
sort.name for sort in sorting"></ select >
< br >< br >< br > Selected sorting algorithm:
< input type = "text" ng-model = "Sorting" />
</ div >
< script >
var app = angular.module("app", []);
app.controller('geek', ['$scope', function($scope) {
$scope.sorting = [{
name: 'Merge sort',
id: 1
}, {
name: 'Quick sort',
id: 2
}, {
name: 'Bubble sort',
id: 3
}];
}]);
</ script >
</ body >
</ html >
|
Output:
Example 2: This example implements the ng-options Directive to hide or display the element in AngularJS.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-options Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app"
style = "text-align: center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >ng-options Directive</ h3 >
< div ng-controller = "geek" ng-init = "Id=1" > Choose:
< select ng-model = "hide" ng-options="show.hide
as show.name for show in HideShow">
</ select >
< br >< br >
< span ng-hide = "hide" >
Check to hide
< input type = "checkbox"
ng-model = "hide" />
</ span >
</ div >
< script >
var app = angular.module("app", []);
app.controller('geek', ['$scope', function($scope) {
$scope.HideShow = [{
name: 'Hide',
hide: true,
}, {
name: 'Show',
hide: false
}];
}]);
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...