JPlol: AngularJS - HTML DOM

As seguintes diretrizes podem ser usadas para vincular dados do aplicativo aos atributos dos elementos DOM HTML.

Sr.No.	Nome	Descrição
1	ng-disabled	Desativa comando.
2	ng-show	Mostra comando.
3	ng-hide	Esconde comando.
4	ng-click	Evento de click.

Diretiva ng-disabled

Adicione o atributo ng-disabled a um botão HTML e o passe a uma model. Vincule a model a uma checkbox.

<input type = "checkbox" ng-model = "showHide1">Mostrar Botão
<button ng-show = "showHide1">Click!</button>

Diretiva ng-hide

Adicione o atributo ng-hide a um botão HTML e o passe a uma model. Vincule a model a uma checkbox.

<input type = "checkbox" ng-model = "showHide2">Esconder Botão
<button ng-hide = "showHide2">Click!</button>

Diretiva ng-click

Adicione o atributo ng-click a um botão HTML e atualize uma model. Vincule a model com o html.

p>Total de clicks: {{ contador }}</p>
<button ng-click = "contador = contador + 1">Click!</button>

Exemplo Completo:

<html>
   
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>DOM HTML</h2>
      <div ng-app = "">
         
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">Desabilitar Botão</td>
               <td><button ng-disabled = "enableDisableButton">Click!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Mostrar Botão</td>
               <td><button ng-show = "showHide1">Click!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Esconder Botão</td>
               <td><button ng-hide = "showHide2">Click!</button></td>
            </tr>
            
            <tr>
               <td><p>Total de clicks: {{ contador }}</p></td>
               <td><button ng-click = "contador = contador + 1">Click!</button></td>
            </tr>
         </table>
         
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Resultado:

sábado, 23 de julho de 2016

AngularJS - HTML DOM

Diretiva ng-disabled

Diretiva ng-hide

Diretiva ng-click

Um comentário:

Total de visualizações de página