menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:07_ngswitch [2014/07/31 20:46] admin |
unidades:04_masdirectivas:07_ngswitch [2014/08/29 23:02] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 4.7 ng-switch ====== | ====== 4.7 ng-switch ====== | ||
| - | La directiva ng-switch es similar a ''ng-if'' y como nos podemos imaginar el como es ''switch'' de la programación. Es decir que permite que entre varios conjuntos de tags solo está uno de ellos, borrando los que no cumplen la condición. | + | La directiva ''ng-switch'' es similar a ''ng-if'' y como nos podemos imaginar es como el ''switch'' de la programación. Es decir que permite que entre varios conjuntos de tags solo esté uno de ellos, borrando los que no cumplen la condición. |
| Esta directiva realmente está compuesta por 4 distintas: | Esta directiva realmente está compuesta por 4 distintas: | ||
| Línea 7: | Línea 7: | ||
| * ''ng-switch-when'' : Se pone en cada uno de los tag que queremos que estén o no estén. Su valor es un literal , no puede ser una expresión del ''$scope'' | * ''ng-switch-when'' : Se pone en cada uno de los tag que queremos que estén o no estén. Su valor es un literal , no puede ser una expresión del ''$scope'' | ||
| * ''ng-switch-default'' : Si no se cumple ninguna condición de ''ng-switch-when'' se muestra el que tenga la directiva ''ng-switch-default'' | * ''ng-switch-default'' : Si no se cumple ninguna condición de ''ng-switch-when'' se muestra el que tenga la directiva ''ng-switch-default'' | ||
| - | Vemos un ejemplo: | + | Veamos un ejemplo: |
| <sxh html;highlight: [1,2,4]> | <sxh html;highlight: [1,2,4]> | ||
| <div ng-switch on="valor"> | <div ng-switch on="valor"> | ||
| - | <div ng-switch-when="A">Es texto solo esta si hay una A</div> | + | <div ng-switch-when="A">Es texto y sólo está si hay una A</div> |
| <div ng-switch-when="B">Texto para el valor B</div> | <div ng-switch-when="B">Texto para el valor B</div> | ||
| <div ng-switch-default>Texto para cuando no es ni A ni B</div> | <div ng-switch-default>Texto para cuando no es ni A ni B</div> | ||
| </div> | </div> | ||
| </sxh> | </sxh> | ||
| - | * Línea 1: Indicamos que es un switch con la directiva ''ng-switch''. Tambine ponemos la expresión en la directiva ''on''. | + | * Línea 1: Indicamos que es un switch con la directiva ''ng-switch''. También ponemos la expresión en la directiva ''on''. |
| * Línea 2: Una posible opción cuando ''valor'' valga la letra "A". | * Línea 2: Una posible opción cuando ''valor'' valga la letra "A". | ||
| - | * Línea 3: Si ''valor'' no vale ni "A" ni "B" estará este tag | + | * Línea 3: Si ''valor'' no vale ni "A" ni "B" estará este tag. |
| <note important> | <note important> | ||
