En la primera unidad ya vimos como usar el tag <select> mediante la directiva ng-model. Lo que vamos a ver ahora es como rellenar todas sus opciones automáticamente a partir de los datos del $scope. Es algo parecido al tag ng-repeat que acabamos de ver y para ello se utiliza la directiva ng-options

Antes de aplicar la directiva deberemos tener una variable en nuestro $scope con el array de datos a mostrar en el <select>.

app.controller("PruebaController", function($scope) {
  $scope.provincias=[
    {
      idProvincia:2,
      nombre:"Castellón"
    },
    {
      idProvincia:3,
      nombre:"Alicante"
    },
    {
      idProvincia:1,
      nombre:"Valencia"
    },
    {
      idProvincia:7,
      nombre:"Teruel"
    },  
    {
      idProvincia:5,
      nombre:"Tarragona"
    }
  ];
    
  $scope.miProvinciaSeleccionada=null

});

Vemos en la línea 2 como hemos definido la variable provincias con un array de provincias. Cada uno de los elementos del array es un objeto completo con todas las propiedades que sean necesarias.

En la línea 13 hemos definido la propiedad miProvinciaSeleccionada que asociaremos el <select> mediante ng-model y que es donde se guardará el valor seleccionado en el <select>.

Ahora que ya tenemos el modelo, pasemos a ver como usar la directiva ng-options.La forma es un poco compleja:

“valor as etiqueta for item in items track by claveunica”

Siendo:

• items:La propiedad del $scope que contiene el array de elementos a mostrar en el <select>.
• item:Es la declaración de una variable que contendrá cada uno de los elementos de items.
• valor: Una expresión que use la variable item que será el valor que se asignará al modelo del <select>.
• etiqueta: Una expresión que use la variable item que será la etiqueta que se mostrará en cada uno de los <option>.
• claveunica: La propiedad que es clave única

En nuestro ejemplo quedará de la siguiente forma:

<select ng-model="miProvinciaSeleccionada" ng-options="provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia" >
  <option value="">--Elige opcion--</option>
</select>

• La lista de todos los valores se obtiene de provincias.
• Cada una de los elementos los referenciamos como provincia.
• La etiqueta de cada uno de los <option> es provincia.nombre.
• El valor que se asignará a la variable provincia del ng-model es la propia variable provincia de cada uno de los elementos.
• La clave única es provincia.idProvincia

Otra forma de ver como funciona la directiva ng-options:

“provincia as provincia.nombre for provincia in provincias”

sería con el siguiente pseudocódigo en Java:

for(Provincia provincia:provincias) {
  valor=provincia;
  etiqueta=provincia.nombre;
}

• select