AngularJS (07) directivas HTML DOM
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="http://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="http://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.
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="http://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….
como hacer que cuando quiera a gregar me aparezcan todos los input habilitados y cuando le de en editar un input aparezca inabilitado en angular 2
No controlo Angular2, de hecho estoy esperandoque se estabilicen, me parece muy poco serio que en menos de tres años estemos ya con Angular4 y se esté escuchando hablar de Angular5… lo siento.