Les directives suivantes peuvent être utilisées pour la liaison des données d'application aux propriétés des éléments HTML DOM.
| S.No. | nom | décrire |
|---|---|---|
| 1 | ng déloyant | Désactiver un contrôle donné |
| 2 | ng-spectacle | Montrer un contrôle donné |
| 3 | norme | Cacher dans le contrôle donné |
| 4 | clic ng | Indique l'événement AngularJs cliquez |
Commande ng-hisaged
Ajoutez la propriété NG-hisportive à un bouton HTML via son modèle. Le modèle est lié à la case à cocher pour voir les modifications suivantes.
<input type = "Checkbox" ng-model = "ENTIVEDISABLEBUTTON"> Désactiver le bouton <Button ng-disabled = "ENTIPATIVEBUTBUTTON"> Cliquez sur moi! </fontificateur>
commande ng-spectacle
Ajoutez la propriété NG-spectacle à un bouton HTML et transmettez-le au modèle. Lisez le modèle à la case et consultez les modifications suivantes.
<input type = "Checkbox" ng-model = "showhide1"> Afficher le bouton <bouton ng-show = "showhide1"> cliquez sur moi! </futch>
commande ng-hide
Ajoutez l'attribut Ng-Hide en tant que bouton HTML via son modèle. Lisez le modèle à la case et consultez les modifications suivantes.
<input type = "checkbox" ng-model = "showhide2"> bouton masquer <bouton ng-hide = "showhide2"> cliquez sur moi! </fut-bouton>
commande ng-clic
Ajoutez l'attribut NG-CLICK en tant que bouton HTML et mettez à jour le modèle. HTML de liaison du modèle pour voir les changements de combinaison.
<p> Total cliquez: {{clickcounter}} </p> </td> <bouton ng-click = "clickCounter = clickcounter + 1"> cliquez sur moi! </fut-bouton>exemple
Les exemples suivants montreront toutes les instructions ci-dessus.
testangularjs.html
<html> <éad- head> <ititle> angularjs html dom </title> </ad> <body> <h2> Angularjs Exemple d'application </h2> <div ng-app = ""> <pally> <tr> <td> <entrée type = "Checkbox" ng-model = "compatiblebutton"> Button Disable </td> <td> ng-disabled = "activéablebutton"> Cliquez sur moi! </futone> </td> </tr> <tr> <td> <entrée type = "Checkbox" ng-model = "showhide1"> Afficher le bouton </td> <td> <bouton ng-show = "showHide1"> Cliquez sur moi! </pulton> </td> </tr> <Tr> ng-model="showHide2">Hide Button</td> <td><button ng-hide="showHide2">Click Me!</button></td></tr><tr> <td><p>Total click: {{ clickCounter }}</p></td> <td><button ng-click="clickCounter = clickCounter + 1">Click Moi! </ Button> </td> </tr> </ table> </ div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </ script> </body> </html>Sortir
Ouvrez Textangularjs.html dans un navigateur Web et voyez les résultats suivants:
Ce qui précède est une compilation de matériaux HTML DOM AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!