AngularJS HTML INICIO
AngularJS tiene directivas para vincular los datos de la aplicación a los atributos de los elementos HTML DOM.
La directiva ng-disabled
La directiva ng-disabled vincula los datos de la aplicación AngularJS al atributo disabled de los elementos HTML.
Ejemplo de AngularJS
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Aplicación explicada:
La directiva ng-disabled vincula los datos de la aplicación mySwitch al atributo deshabilitado del botón HTML .
La directiva ng-model vincula el valor del elemento de casilla de verificación HTML al valor de mySwitch .
Si el valor de mySwitch se evalúa como verdadero , el botón se desactivará:
<p>
<button disabled>Click Me!</button>
</p>
Si el valor de mySwitch se evalúa como falso , el botón no se desactivará:
<p>
<button>Click Me!</button>
</p>
La Directiva ng-show
La directiva ng-show muestra u oculta un elemento HTML.
Ejemplo de AngularJS
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
La directiva ng-show muestra (u oculta) un elemento HTML basado en el valor de ng-show.
Puede usar cualquier expresión que se evalúe como verdadera o falsa:
Ejemplo de AngularJS
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
En el próximo capítulo, hay más ejemplos, utilizando el clic de un botón para ocultar elementos HTML.
La directiva ng-hide
La directiva ng-hide oculta o muestra un elemento HTML.
Ejemplo de AngularJS
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>