Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:04_masdirectivas:05_ngoptions [2014/07/31 16:29]
admin creado
unidades:04_masdirectivas:05_ngoptions [2014/11/07 20:45] (actual)
admin
Línea 1: Línea 1:
 ====== 4.5 ng-options ====== ====== 4.5 ng-options ======
-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''​+En la primera unidad ya vimos cómo usar el tag ''<​select>''​ mediante la directiva ''​ng-model''​. Lo que vamos a ver ahora es cómo 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'' ​((Estrictamente hablando ''​ng-options''​ no es una directiva sino que es simplemente un atributo de la directiva ''​select''​ asociada al tag ''<​select>''​))
  
  
 Antes de aplicar la directiva deberemos tener una variable en nuestro ''​$scope''​ con el array de datos a mostrar en el ''<​select>''​. Antes de aplicar la directiva deberemos tener una variable en nuestro ''​$scope''​ con el array de datos a mostrar en el ''<​select>''​.
  
-<sxh js> +<sxh js;highlight: [2,25];
-function ​MiPageController($scope) { +app.controller("​PruebaController", ​function($scope) { 
-    $scope.provincias = [{ +  $scope.provincias=[ 
-        idProvincia:​ 1, +    ​
-        nombre: "​Valencia"​ +      ​idProvincia:​2,​ 
-    }, { +      nombre:"​Castellón"​ 
-        idProvincia: ​2+    }, 
-        nombre: "Castellón+    { 
-    }, { +      idProvincia:​3,​ 
-        idProvincia: ​3+      nombre:"​Alicante"​ 
-        nombre: "Alicante" ​      +    }, 
-    }];+    { 
 +      ​idProvincia:​1,​ 
 +      nombre:"​Valencia"​ 
 +    }, 
 +    ​
 +      idProvincia:​7
 +      nombre:"​Teruel
 +    },   
 +    ​
 +      idProvincia:​5
 +      nombre:"​Tarragona
 +    } 
 +  ​]; 
 +     
 +  $scope.miProvinciaSeleccionada=null
  
-    $scope.provincia = null; +});
-}+
 </​sxh>​ </​sxh>​
  
-Vemos en la línea ​como hemos definido la variable ''​provincias''​ con un array de las 3 provincias ​de la comunidad valencianaCada uno de los elementos del array es un objeto ​completo con todas las propiedades ​que sean necesarias.+  * Línea ​: Hemos definido la variable ''​provincias''​ con el array de provincias ​a mostrar en el tag ''<​select>''​. 
 +  * Línea 25: Propiedad ''​miProvinciaSeleccionada''​ asociada al ''<​select>''​ mediante ''​ng-model''​ y que es donde se guardará el valor seleccionado en el ''<​select>''​. Los más importante es que contendrá el **objeto** correspondiente a la provincia ​que se ha seleccionado y no sólo su ''​idProvincia''​.
  
-En la línea 13 hemos definido la propiedad ''​provincia'' ​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 cómo usar la directiva ​''​ng-options''​.La forma es un poco compleja:
  
-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//"
- +
-"//​valor//​ **as** //​etiqueta//​ **for** //item// **in** //​items//"​+
  
 Siendo: Siendo:
   * //​items//:​La propiedad del ''​$scope''​ que contiene el array de elementos a mostrar en el ''<​select>''​.   * //​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//​. +  * //item//:Es la declaración de una variable que contendrá cada uno de los elementos de //items//. Este valor puede ser cualquier texto que decidamos
-  * //valor//: Una expresión que use la variable //item// que será el valor que se asignará al modelo del ''<​select>''​.+  * //valor//: Una expresión que use la variable //item// que será el valor que se asignará al modelo del ''<​select>''​. En nuestro caso será el objeto entero.
   * //​etiqueta//:​ Una expresión que use la variable //item// que será la etiqueta que se mostrará en cada uno de los ''<​option>''​.   * //​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: En nuestro ejemplo quedará de la siguiente forma:
  
 <sxh html> <sxh html>
-    ​<select ng-model="​provincia" ​ ng-options="​provincia as provincia.nombre for provincia in provincias">​ +<select ng-model="​miProvinciaSeleccionada" ng-options="​provincia as provincia.nombre for provincia in provincias ​track by provincia.idProvincia" > 
-         ​<option value="">​-- Elige Provincia ​--</​option>​ +  <option value="">​--Elige ​opcion--</​option>​ 
-     ​</​select>​+</​select>​
 </​sxh>​ </​sxh>​
  
   * La lista de todos los valores se obtiene de ''​provincias''​. ​   * La lista de todos los valores se obtiene de ''​provincias''​. ​
-  * Cada una de los elementos los referenciamos como ''​provincia''​.+  * Cada uno de los elementos los referenciamos como ''​provincia''​.
   * La etiqueta de cada uno de los ''<​option>''​ es ''​provincia.nombre''​.   * 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.   * 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'':​+Otra forma de ver cómo funciona la directiva ''​ng-options'':​
  
 "//​provincia//​ **as** //​provincia.nombre//​ **for** //​provincia//​ **in** //​provincias//"​ "//​provincia//​ **as** //​provincia.nombre//​ **for** //​provincia//​ **in** //​provincias//"​
Línea 63: Línea 77:
  
 <note important>​ <note important>​
-Hay que fijarse en la potencia de AngularJS. ​el ''<​select>''​ no lo hemos asociado a un simple valor numérico como ''​idProvincia''​ sino un el objeto completo ''​provincia''​. ​+Hay que fijarse en la potencia de AngularJS. ​El ''<​select>''​ no lo hemos asociado a un simple valor numérico como ''​idProvincia''​ sino con el objeto completo ''​provincia''​. ​
  
 Aunque nada impide asociarlo al ''​idProvincia''​. Habría que modificar la directiva de la siguiente forma: Aunque nada impide asociarlo al ''​idProvincia''​. Habría que modificar la directiva de la siguiente forma:
 ''"​provincia.idProvincia as provincia.nombre for provincia in provincias"''​ ''"​provincia.idProvincia as provincia.nombre for provincia in provincias"''​
- 
 </​note>​ </​note>​
  
  
 <​note>​ <​note>​
-En la línea 2 del HTML podemos ver como se ha añadido un ''<​option>''​ para el caso del valor ''​null'​. Es recomendable añadir esta opción, ya que sino lo hará automáticamente AngularJS pero al seleccionar una provincia desaparecerá la opción vacía, lo que hace que sea muy extraño para el usuario.+En la línea 2 del HTML podemos ver cómo se ha añadido un ''<​option>''​ para el caso del valor ''​null''. Es recomendable añadir esta opción, ya que si no lo hará automáticamente AngularJS pero al seleccionar una provincia desaparecerá la opción vacía, lo que hace que sea muy extraño para el usuario. 
 +</​note>​
  
 +<note warning>
 +En muchos ejemplos en internet de ''​ng-options''​ no se usa la parte de ''​track by''​ . Podríamos pensar que no es necesario ponerlo ya que es una simple optimización. Pues en caso de que estemos tratando con **objetos en el ''​ng-model''​**,​ la mayoría de veces es un error no ponerlo. ​
  
-</note>+Si quitamos ''​track by provincia.idProvincia'' ​  y modificamos la propiedad ''​miProvinciaSeleccionada''​ de la siguiente manera: 
 +<sxh js> 
 +  $scope.miProvinciaSeleccionada={ 
 +      idProvincia:​3,​ 
 +      nombre:"​Alicante"​ 
 +    } 
 +</sxh>
  
 +Veremos que no está seleccionada la provincia de Alicante. ​
 +¿Por qué no está seleccionada la provincia de Alicante? Porque realmente no hemos seleccionado ningún elemento del array. Se debería haber puesto:
 +
 +<sxh js>
 +  $scope.miProvinciaSeleccionada=$scope.provincias[1];​
 +</​sxh>​
 +
 +Puesto que ''​$scope.provincias[1]''​ no es igual a ''​{ idProvincia:​3,​ nombre:"​Alicante"​}''​ aunque tengan los mismo valores. Realmente son 2 objetos distintos ya que apuntan a zonas de memoria distintas.
 +
 +Añadiendo a ''​ng-options''​ el texto ''​track by provincia.idProvincia''​ le decimos a AngularJS que compare cada objeto por la propiedad ''​idProvincia'',​ por lo que el objeto ''​$scope.provincias[1]''​ ya es igual a ''​{ idProvincia:​3,​ nombre:"​Alicante"​}''​ ya que el ''​idProvincia''​ de ''​$scope.provincias[1]''​ es 3
 +
 +¿Y es realmente útil?
 +Si , cuando tengamos el array y a la variable ''​$scope.miProvinciaSeleccionada''​ se le asigne un objeto desde el servidor querremos que lo seleccione aunque no sea el mismo objeto.
 +
 +Si el valor es un escalar como un String o un número no es necesario poner el ''​track by''​ si no es por temas de optimización.
 +
 +</​note>​
 ====== Ejemplo ====== ====== Ejemplo ======
-{{url>​http://​embed.plnkr.co/​N6noESamnVCPOcbkgm25}}+El ejemplo completo quedaría de la siguiente forma:
  
 +<sxh html; title:​index.html>​
 +<​!DOCTYPE html>
 +<html ng-app="​app">​
 +
 +<​head>​
 +  <script src="//​ajax.googleapis.com/​ajax/​libs/​angularjs/​1.2.19/​angular.js"></​script>​
 +  <script src="​script.js"></​script>​
 +</​head>​
 +
 +<body ng-controller="​PruebaController">​
 +
 +      <select ng-model="​miProvinciaSeleccionada"​ ng-options="​provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia"​ >
 +        <option value="">​--Elige opcion--</​option>​
 +      </​select>​
 +      <br>
 +      El nombre de la provincia seleccionada es:​{{miProvinciaSeleccionada.nombre}}
 +      ​
 +</​body>​
 +
 +</​html>​
 +</​sxh>​
 +
 +<sxh js; title:​script.js>​
 +var app = angular.module("​app",​ []);
 + 
 +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={
 +      idProvincia:​3,​
 +      nombre:"​Alicante"​
 +    }
 +
 +});
 +</​sxh>​
 +
 +{{url>​http://​embed.plnkr.co/​N6noESamnVCPOcbkgm25}}
 ====== Referencias ====== ====== Referencias ======
   * [[https://​docs.angularjs.org/​api/​ng/​directive/​select|select]]   * [[https://​docs.angularjs.org/​api/​ng/​directive/​select|select]]
- 
unidades/04_masdirectivas/05_ngoptions.1406816950.txt.gz · Última modificación: 2014/07/31 16:29 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0