AngularJS DOM HTML

AngularJS proporciona instrucciones que pueden unir los datos de la aplicación con las propiedades de los elementos del DOM HTML.

Instrucción ng-disabled

instrucción ng-disabled La instrucción une los datos de la aplicación de AngularJS con la propiedad disabled del elemento HTML.

Ejemplos de AngularJS

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">¡Haz clic en mí!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Botón
</p>
<p>
{{ mySwitch }}
</p>
</div>

Prueba por su cuenta

Anotación:

instrucción ng-disabled aplicación de datos mySwitch La instrucción ng-disabled une los datos de la aplicación Se une a la instrucción ng-disabled del botón HTML propiedad

propiedad ng-model. La instrucción une el valor del elemento de casilla de verificación HTML con mySwitch sobre el valor.

Si mySwitch el valor de trueentonces el botón se desactivará:

<p>
<button disabled>¡Haz clic en mí!</button>
</p>

Si mySwitch el valor de falseSi no se especifica, el botón no se desactivará:

<p>
<button>¡Haz clic en mí!</button>
</p>

Instrucción ng-show

ng-show Las instrucciones muestran u ocultan elementos HTML.

Ejemplos de AngularJS

<div ng-app="">  
<p ng-show="true">Soy visible.</p>  
<p ng-show="false">No soy visible.</p>  
</div>

Prueba por su cuenta

ng-show La directiva se basa en el valor de ng-show.ValorMostrar (o ocultar) elementos HTML.

Puede usar cualquier expresión evaluada como verdadera o falsa:

Ejemplos de AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Soy visible.</p>
</div>

Prueba por su cuenta

En el siguiente capítulo, se proporcionarán más ejemplos que ilustran cómo usar clics en botones para ocultar elementos HTML.

Directiva ng-hide

ng-hide La directiva oculta o muestra elementos HTML.

Ejemplos de AngularJS

<div ng-app="">  
<p ng-hide="true">No soy visible.</p>  
<p ng-hide="false">Soy visible.</p>  
</div>

Prueba por su cuenta