AngularJS ng-options Directive
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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </ script > </ head > < body ng-app = "app" style = "text-align: center" > < h1 style = "color:green" > w3wiki </ 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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </ script > </ head > < body ng-app = "app" style = "text-align: center" > < h1 style = "color:green" >w3wiki</ 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: