As seguintes diretivas podem ser usadas para ligação de dados do aplicativo às propriedades dos elementos HTML DOM.
| S.No. | nome | descrever |
|---|---|---|
| 1 | ng-Disabled | Desativar um determinado controle |
| 2 | ng-show | Mostrar um determinado controle |
| 3 | ng-hide | Esconder no controle dado |
| 4 | ng-clique | Indica AngularJS Click Event |
comando ng-disabled
Adicione a propriedade NG-Disabled a um botão HTML através de seu modelo. O modelo está vinculado à caixa de seleção para ver as seguintes alterações.
<input type = "Caixa de seleção" ng-model = "EnabledIsableButton"> Button desabilitar <Button ng-Disabled = "EnabledIsableButton"> Clique em mim! </button>
comando ng-show
Adicione a propriedade NG-SHOW a um botão HTML e passe-o para o modelo. Ligue o modelo à caixa de seleção e veja as seguintes alterações.
<input type = "Caixa de seleção" ng-model = "ShowHide1"> Mostrar botão <Button ng-Show = "ShowHide1"> Clique em mim! </but uma botão>
comando ng-hide
Adicione o atributo ng-hide como botão HTML por meio de seu modelo. Ligue o modelo à caixa de seleção e veja as seguintes alterações.
<input type = "Caixa de seleção" ng-model = "ShowHide2"> Ocultar botão <Button ng-hide = "ShowHide2"> Clique em mim! </button>
comando ng-click
Adicione o atributo ng-clique como botão HTML e atualize o modelo. Modelo de ligação HTML para ver as alterações em combinação.
<p> Clique total: {{clickCounter}} </p> </td> <botão ng-click = "clickcounter = clickcounter + 1"> clique em mim! </button>exemplo
Os exemplos a seguir mostrarão todas as instruções acima.
testangularjs.html
<html> <head> <title> angularjs html dom </title> </ad Head> <body> <h2> Aplicação de amostra de AngularJS </h2> <div ng-app = ""> <table> <tr> <td> <td> <but type = "caixa de seleção" ng-model = "Enabled> ng-disabled = "EnabledIsableButton"> Clique em mim! ng-model = "ShowHide2"> Ocultar botão </td> <td> <botão ng-hide = "ShowHide2"> Clique em mim! Eu! </butão> </td> </tr> </ table> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
Saída
Open textangularjs.html em um navegador da web e veja os seguintes resultados:
O acima é uma compilação de materiais angulares html dom. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!