menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:01_introduccion:directivas:start [2013/09/10 23:31] admin Page moved from unidades:directivas:unidades:01_introduccion:start to unidades:01_introduccion:directivas:start |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Directivas ====== | ||
| - | Las directivas son simplemente atributos que añadimos a nuestros tag HTML. Estos atributos no son estándar de HTML sino atributos específicos de AngularJS. | ||
| - | Un ejemplo de directiva es ''ng-show'', esta directiva nos permite especificar cuándo se muestra un tag HTML. | ||
| - | |||
| - | Cambiemos ahora el modelo añadiendo los campos ''alergico'' y ''nombreAlergia'' | ||
| - | <sxh js> | ||
| - | function MiPageController($scope) { | ||
| - | |||
| - | var datos={ | ||
| - | nombre:"Rafel Lorenzo", | ||
| - | ape1:"González", | ||
| - | ape2:"Aznar", | ||
| - | alergico:false, | ||
| - | nombreAlergia:null | ||
| - | }; | ||
| - | |||
| - | |||
| - | $scope.seguro=datos; | ||
| - | } | ||
| - | </sxh> | ||
| - | |||
| - | E incluyamos los campos correspondientes en el HTML | ||
| - | |||
| - | <sxh html> | ||
| - | <body ng-controller="MiPageController" > | ||
| - | Nombre:{{unidades:directivas:seguro.nombre}}<br /> | ||
| - | Primer apellido:{{unidades:directivas:seguro.ape1}}<br /> | ||
| - | Segundo apellido:{{unidades:directivas:seguro.ape2}}<br /> | ||
| - | <br /> | ||
| - | <br /> | ||
| - | Nombre:<input type="text" ng-model="seguro.nombre" ><br/> | ||
| - | Primer apellido:<input type="text" ng-model="seguro.ape1" ><br/> | ||
| - | Segundo apellido:<input type="text" ng-model="seguro.ape2" ><br/> | ||
| - | Alergico:<input type="checkbox" ng-model="seguro.alergico"><br /> | ||
| - | <div ng-show="seguro.alergico==true" > | ||
| - | Nombre Alergia:<input type="text" ng-model="seguro.nombreAlergia" > | ||
| - | </div> | ||
| - | </body> | ||
| - | </sxh> | ||
| - | |||
| - | En la línea 10 hemos añadido un checkbox con la propiedad ''seguro.alergico''. También en las líneas 11-13 se ha añadido un ''<div>'' con el nombre de la alergia. | ||
| - | |||
| - | Lo importante es la línea 11 con la directiva ''ng-show="seguro.alergico==true"'' con ella indicamos que el ''<div>'' sólo sea visible si la persona es alérgica. | ||
| - | ¡¡¡Lo importante es que sólo estamos tratando con el modelo, sin preocuparnos de si el ''input'' está o no marcado.!!! | ||
| - | |||
| - | **Demo** | ||
| - | {{url>http://jsfiddle.net/logongas/FBWdc/embedded/result,js,html}} | ||
| - | |||
| - | ====== enlaces ====== | ||
| - | * http://docs.angularjs.org/guide/directive | ||
