AngularJS Select (cuadro de selección)

AngularJS puede usar arrays u objetos para crear opciones de lista desplegable.

Usar ng-options para crear un cuadro de selección

En AngularJS podemos usarng-optionla directiva para crear una lista desplegable, cuyos elementos se generan recorriendo objetos y arrays, como en el siguiente ejemplo:

Ejemplo

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Ejemplo", "Taobao"]; }); </script>

Pruébalo »

ng-init establece el valor seleccionado por defecto.

ng-options y ng-repeat

También podemos usarng-repeatla directiva para crear listas desplegables:

Ejemplo

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

Pruébalo »

ng-repeatLa directiva recorre el código HTML mediante arrays para crear listas desplegables, perong-optionsla directiva es más adecuada para crear listas desplegables, tiene las siguientes ventajas:

Usarng-optionslas opciones son objetos,ng-repeates una cadena.

¿Cuál es mejor?

Supongamos que usamos el siguiente objeto:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Ejemplo", url : "http://www.example.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeatTiene limitaciones, el valor seleccionado es una cadena:

Ejemplo

Usandong-repeat:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>Has seleccionado:{{selectedSite}}</h1>

Pruébalo »

Usandong-optionsla directiva, el valor seleccionado es un objeto:

Ejemplo

Usandong-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>Has seleccionado:{{selectedSite.site}}</h1>
<p>La URL es:{{selectedSite.url}}</p>

Pruébalo »

Cuando el valor seleccionado es un objeto, podemos obtener más información y la aplicación es más flexible.

Fuente de datos como objeto

En los ejemplos anteriores usamos arrays como fuente de datos; a continuación usaremos objetos como fuente de datos.

$scope.sites = {
    site01 : "Google",
    site02 : "Ejemplo",
    site03 : "Taobao"
};

ng-optionsUsar objetos es muy diferente, como se muestra a continuación:

Ejemplo

Usando un objeto como fuente de datos,xcomo clave (key),ycomo valor (value):

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>El valor que has seleccionado es:{{selectedSite}}</h1>

Pruébalo »

El valor que has seleccionado es el value en el par key-valuedel parvalue。

valueen key-valueEn el par también puede ser un objeto:

Ejemplo

El valor seleccionado está en el par key-valuedel parvaluey en este caso es un objeto:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Pruébalo »

En el menú desplegable también se puede no usarkeydel par -valuekey, usar directamente las propiedades del objeto:

Ejemplo

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Pruébalo »
Otras extensiones