DOM HTML AngularJS

AngularJS oferece comandos que ligam dados do aplicativo aos atributos de elementos do DOM HTML.

Comando ng-disabled

ng-disabled O comando liga dados do aplicativo AngularJS ao atributo disabled dos elementos HTML.

Exemplo AngularJS

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Clique em mim!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Botão
</p>
<p>
{{ mySwitch }}
</p>
</div>

Experimente por Si Mesmo

Aplicação do esclarecimento:

ng-disabled O comando aplica dados do aplicativo mySwitch liga ao comando HTML do botão disabled propriedade.

ng-model O comando liga o valor do elemento de caixa de seleção HTML ao atributo mySwitch no valor.

Se mySwitch o valor é trueSe for verdadeiro, o botão será desativado:

<p>
<button disabled>Clique em mim!</button>
</p>

Se mySwitch o valor é falseSe não for verdadeiro, o botão não será desativado:

<p>
<button>Clique em mim!</button>
</p>

Comando ng-show

ng-show O comando exibe ou oculta elementos HTML.

Exemplo AngularJS

<div ng-app="">  
<p ng-show="true">Estou visível.</p>  
<p ng-show="false">Eu não sou visível.</p>  
</div>

Experimente por Si Mesmo

ng-show A directiva depende do valor de ng-showValorExibir (ou ocultar) elementos HTML.

Você pode usar qualquer expressão avaliada como verdadeira ou falsa:

Exemplo AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Eu sou visível.</p>
</div>

Experimente por Si Mesmo

No próximo capítulo, serão fornecidos mais exemplos de como usar cliques de botão para ocultar elementos HTML.

Directiva ng-hide

ng-hide Directiva oculta ou exibe elementos HTML.

Exemplo AngularJS

<div ng-app="">  
<p ng-hide="true">Eu não sou visível.</p>  
<p ng-hide="false">Eu sou visível.</p>  
</div>

Experimente por Si Mesmo