¡Esta es una revisión vieja del documento!

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

function MiPageController($scope) {
 
  var datos={
    nombre:"Rafel Lorenzo",
    ape1:"González",
    ape2:"Aznar",
    alergico:false,
    nombreAlergia:null
  };
 
 
  $scope.seguro=datos;
}

E incluyamos los campos correspondientes en el 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>

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

enlaces

http://docs.angularjs.org/guide/directive

unidades/01_introduccion/directivas/start.1378848690.txt.gz · Última modificación: 2013/09/10 23:31 por admin

Ir hasta arriba