Las ng-options en AngularJS

Rana Hasnain Khan 15 febrero 2024 Angular Angular ng-options

Este tutorial discutirá el ng-options y cómo podemos usarlas para mostrar opciones en seleccionar usando AngularJS.

Use `ng-options` en AngularJS

Las ng-options se utilizan para crear y vincular elementos HTML con opciones a una propiedad de modelo. Usamos ng-options para especificar opciones en una lista de selección.

ng-options está diseñado específicamente para completar los elementos de una lista desplegable. Veremos un ejemplo en el que crearemos un menú desplegable que usará ng-options para completar las opciones.

En primer lugar, agregamos la biblioteca AngularJS y el archivo app.js usando las etiquetas script.

# AngularJS
<head>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script src="app.js"></script>
  </head>

Defina la aplicación AngularJS usando ng-app y el controlador usando ng-controller.

# AngularJS
<body ng-app="myApp">
    <div ng-controller="myController"></div>
  </body>

Ahora, en app.js, crearemos nuestro módulo.

# AngularJS
var app = angular.module('myApp', []);

Crearemos un controlador que definirá un array, selectedItem, y agregará valores asignados a la matriz para opciones en app.js.

# AngularJS
app.controller('myController', function($scope) {

  $scope.lists = [];
  $scope.selectedItem = { name: 'second', id: 5 };
  $scope.lists = [{name: 'first', id: 3 },{ name: 'second', id: 5 },{ name: 'third', id: 7 }];

});

Por último, crearemos una interfaz para nuestra aplicación.

# AngularJS
    <p>selected item is : {{selectedItem}}</p>
    <p> name of selected item is : {{selectedItem.name}} </p>
    <select ng-model="selectedItem" ng-options="list.name for list in lists track by list.id"></select>

Producción:

Ejemplo de ng-options en angularjs

En el ejemplo anterior que usa ng-options, es muy fácil mostrar una lista de opciones en select. No necesitamos escribir ninguna línea adicional de código para seleccionar un elemento cuando un usuario selecciona un elemento.

¿Disfrutas de nuestros tutoriales? Suscríbete a DelftStack en YouTube para apoyarnos en la creación de más guías en vídeo de alta calidad. Suscríbete

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Use ng-options en AngularJS

Use `ng-options` en AngularJS