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.
Tóm Tắt
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"
>
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
=
"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"
>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:
My Personal Notes
arrow_drop_up