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= </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:
Please Login to comment...