La directiva ng-options en AngularJS se utiliza para crear y vincular elementos HTML con opciones a una propiedad de modelo. Se utiliza para especificar <opciones> en una lista <seleccionar>. Está diseñado específicamente para completar los elementos de una lista desplegable. Es compatible con el elemento <supported>.
Sintaxis:
<element ng-options="expression"> Content ... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-options para mostrar el elemento de opción.
<!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>
<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>
Salida:
Antes de seleccionar el elemento: 
Después de seleccionar el elemento:
Ejemplo 2: este ejemplo utiliza la directiva ng-options para ocultar o mostrar el elemento.
<!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>
<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>
Salida:
Antes de seleccionar ocultar elemento: 
Después de seleccionar ocultar elemento:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA