AngulaJS puede afectar a algunos elementos del DOM de HTML, para ello utiliza una serie de directivas tal y como veremos en los siguientes ejemplos...
La directiva ng-disabled
Esta directiva nos ofrece la posibilidad de poder desactivar un elemento del DOM para que el usuario no pueda trabajar con él. Veamos el siguiente ejemplo:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Haz Click!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Activar botón
</p>
<p>
estado del Switch: {{ mySwitch }}
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
- Como siempre se inicializa la aplicación con ng-app
- Le damos el valor inicial a la variable mySwitch, por medio de ng-init, que es true, esto hará que el elemento seleccionado esta no disponible.
- Se introduce la variable mySwitch en un botón por medio de la directiva ng-disabled, que esta en true lo que viene a decir: Sí esta desactivado.
- A continuación con ng-model se puede modificar el valor de la variable y de ese modo activar o desactivar la opción de clickar
- Finalmente hay una expresión que nos indica el estado de la variable mySwitch
La directiva ng-show
Esta directiva que puede tomar los valores true o false es muy util para mostrar elementos del DOM o no como vemos en el siguiente ejemplo.
<!DOCTYPE html> <html> <body> <div ng-app=""> <p ng-show="true">Visible.</p> <p ng-show="false">Invisible.</p> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
Vemos que si ng-show es true, entonces el elemento del DOM se muestra en pantalla, mientras que si es false no.
Con estas directivas ya podemos imaginar que es lo siguiente que veremos; eventos y scripts para poder ocultar y mostrar elementos del DOM.... haciendo ya cositas interesantes....
La directiva ng-hide
De forma muy similar pero cambiando el significado de los valores true o false, funciona la directiva ng-hide, la cual se muestra cuando su valor el false y se oculta cuando su valor es true<!DOCTYPE html> <html> <body> <div ng-app=""> <p ng-hide="true">Invisible</p> <p ng-hide="false">Visible</p> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
Con estas directivas ya podemos imaginar que es lo siguiente que veremos; eventos y scripts para poder ocultar y mostrar elementos del DOM.... haciendo ya cositas interesantes....
No hay comentarios:
Publicar un comentario