AngularJS | ng-options Directive
The ng-options Directive in AngularJS is used to build and bind HTML element with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items of a dropdown list. It is supported by <supported> element.
Syntax:
<element ng-options="expression"> Content ... </element>
Example 1: This example uses ng-options Directive to display the option element.
<!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 > < h2 >ng-options Directive</ h2 > < 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 >< 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:
Before selecting the element:
After selecting the element:
Example 2: This example uses ng-options Directive to hide or display the element.
<!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 > < h2 >ng-options Directive</ h2 > < 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 >< 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:
Before selecting hide element:
After selecting hide element:
Recommended Posts:
- AngularJS | ng-app Directive
- AngularJS | ng-if Directive
- AngularJS | ng-jq Directive
- AngularJS | ng-src Directive
- AngularJS | ng-cut Directive
- AngularJS | ng-value Directive
- AngularJS | ng-csp Directive
- AngularJS | Directive
- AngularJS | ng-selected Directive
- AngularJS | ng-required Directive
- AngularJS | ng-paste Directive
- AngularJS | ng-srcset Directive
- AngularJS | ng-readonly Directive
- AngularJS | ng-blur Directive
- AngularJS | ng-bind Directive
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.