Die folgenden Anweisungen können zur Bindung von Anwendungsdaten an Eigenschaften von HTML -DOM -Elementen verwendet werden.
| S.no. | Name | beschreiben |
|---|---|---|
| 1 | NG-Behinderung | Deaktivieren Sie eine bestimmte Kontrolle |
| 2 | ng-show | Zeigen Sie eine bestimmte Kontrolle |
| 3 | Ng-Hide | Verstecken Sie sich in der gegebenen Kontrolle |
| 4 | NG-Klick | Zeigt an AngularJS -Klickereignisse an |
Befehl ng-deaktiviert
Fügen Sie die NG-behinderte Eigenschaft über ihr Modell zu einer HTML-Taste hinzu. Das Modell ist an das Kontrollkästchen gebunden, um die folgenden Änderungen anzuzeigen.
<Eingabe type = "CheckBox" ng-model = "enabledSableButton"> Schaltfläche Deaktivieren <Taste ng-disabled = "enabledSableButton"> Klicken Sie auf mich! </button>
Befehl ng-show
Fügen Sie die NG-Show-Eigenschaft einer HTML-Taste hinzu und geben Sie sie an das Modell weiter. Binden Sie das Modell an das Kontrollkästchen und sehen Sie die folgenden Änderungen.
<Eingabe type = "CheckBox" ng-model = "showHide1"> Taste anzeigen <Taste ng-show = "showHide1"> Klicken Sie auf mich! </button>
NG-Hide-Befehl
Fügen Sie das NG-Hide-Attribut als HTML-Taste durch sein Modell hinzu. Binden Sie das Modell an das Kontrollkästchen und sehen Sie die folgenden Änderungen.
<Eingabe type = "CheckBox" ng-model = "showHide2"> Button <Taste ausblenden <ng-hide = "showHide2"> Klicken Sie auf mich! </button>
NG-Klick-Befehl
Fügen Sie das NG-Klickattribut als HTML-Schaltfläche hinzu und aktualisieren Sie das Modell. Modellbindung HTML, um die Änderungen in Kombination zu sehen.
<p> Gesamtklick: {{ClickCounter}} </p> </td> <Schaltfläche ng-klick = "clickCounter = clickCounter + 1"> Klick mich! </button>Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<html> <Head> <titels> Angularjs html dom </title> </head> <body> <h2> AngularJS Sample Application </h2> <div ng-app = "> <table> <tr> <Td> <Eingabe type =" Checkbox "ng-model =" aktiviertes Button "> disable butth> </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </<td> <td> </td> <td> <td> </td> <td> <td> </td> <td> <- ng-disabled="enableDisableButton">Click Me!</button></td></tr><tr> <td><input type="checkbox" ng-model="showHide1">Show Button</td> <td><button ng-show="showHide1">Click Me!</button></td></tr><tr> <td><input type="checkbox" ng-model = "showHide2"> Button ausblenden </td> <td> <button ng-hide = "showHide2"> klicken Sie mir! ME!
Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:
Das obige ist eine Zusammenstellung von AngularJS -HTML -DOM -Materialien. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!