menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:07_ngswitch [2014/07/31 19:41] admin creado |
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 | + | 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: | ||
| + | * ''ng-switch'': Es para indicar que queremos hacer el switch | ||
| + | * ''on'': Como valor de la directiva debemos poner una propiedas 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'' | ||
| + | Veamos un ejemplo: | ||
| + | <sxh html;highlight: [1,2,4]> | ||
| + | <div ng-switch on="valor"> | ||
| + | <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-default>Texto para cuando no es ni A ni B</div> | ||
| + | </div> | ||
| + | </sxh> | ||
| + | * 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 3: Si ''valor'' no vale ni "A" ni "B" estará este tag. | ||
| + | |||
| + | <note important> | ||
| + | Al igual que con [[unidades:04_masdirectivas:06_ngif|ng-if]], se crea un nuevo ''$scope''. | ||
| + | </note> | ||
| ===== Ejemplo ===== | ===== Ejemplo ===== | ||
| Línea 7: | Línea 28: | ||
| ===== Referencias ===== | ===== Referencias ===== | ||
| * [[https://docs.angularjs.org/api/ng/directive/ngSwitch|ng-switch]] | * [[https://docs.angularjs.org/api/ng/directive/ngSwitch|ng-switch]] | ||
| - | |||
