AngularJS HTML DOM

AngularJS proporciona directivas para vincular datos de la aplicación a los atributos de los elementos del DOM HTML.

Directiva ng-disabled

ng-disabledLa directiva vincula directamente los datos de la aplicación al atributo disabled de HTML.

Ejemplo de AngularJS

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">¡Haz clic!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Botón
</p>

<p>
{{ mySwitch }}
</p>

</div>

Pruébalo »

Explicación del ejemplo:

ng-disabledLa directiva vincula los datos de la aplicación "mySwitch" al atributo disabled de HTML.

ng-modelLa directiva vincula "mySwitch" al contenido (value) del elemento checkbox de entrada HTML.

SimySwitchParatrue, el botón no estará disponible:

<p>
<button disabled>¡Haz clic!</button>
</p>

SimySwitchParafalse, el botón está disponible:

<p>
<button>¡Haz clic!</button>
</p>

Directiva ng-show

ng-showLa directiva oculta o muestra un elemento HTML.

Ejemplo de AngularJS

<div ng-app="">

<p ng-show="true">Soy visible.</p>

<p ng-show="false">Soy invisible.</p>

</div>

Pruébalo »

La directiva ng-show según valueel valor, muestra (oculta) el elemento HTML.

Puedes usar expresiones para calcular valores booleanos (true o false):

Ejemplo de AngularJS

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

Pruébalo »

Note En el próximo capítulo, presentaremos más ejemplos de cómo ocultar elementos HTML haciendo clic en botones.

Directiva ng-hide

ng-hideLa directiva se utiliza para ocultar o mostrar elementos HTML.

Ejemplo de AngularJS

<div ng-app="">

<p ng-hide="true">Soy invisible.</p>

<p ng-hide="false">Soy visible.</p>

</div>

Pruébalo »
Otras extensiones