suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die HTML-DOM-Unterstützung von AngularJS_AngularJS

Einführung in die HTML-DOM-Unterstützung von AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:54:421182Durchsuche

Die folgenden Anweisungen können verwendet werden, um Datenbindung auf Attribute von HTML-DOM-Elementen anzuwenden.

201561794017811.jpg (742×213)

Fügen Sie das ng-show-Attribut zu einer HTML-Schaltfläche hinzu und übergeben Sie es an das Modell. Binden Sie das Modell an das Kontrollkästchen und sehen Sie sich die folgenden Änderungen an. 

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

ng-hide-Befehl

Fügen Sie über sein Modell das ng-hide-Attribut zur HTML-Schaltfläche hinzu. Binden Sie das Modell an das Kontrollkästchen und sehen Sie sich die folgenden Änderungen an. 

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

ng-click-Befehl

Fügen Sie das ng-click-Attribut zur HTML-Schaltfläche hinzu und aktualisieren Sie das Modell. Modellieren Sie Bindungs-HTML, um die Bindungsänderungen anzuzeigen. 

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.
testAngularJS.html

<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
  <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
  <td><button 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">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 Me!</button></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Ausgabe

Öffnen Sie textAngularJS.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:

201561794134891.png (694×337)

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Organisieren Sie einige allgemeine Anweisungen in AngularJS_AngularJSNächster Artikel：Organisieren Sie einige allgemeine Anweisungen in AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen