AngularJS HTML DOM

AngularJS bietet Anweisungen, um Anwendung Daten an die Attribute des HTML DOM Elements zu binden.

ng-disabled Anweisung

ng-disabled Anweisung bindet die Anwendung Daten des AngularJS an die disabled-Eigenschaft des HTML-Elements.

AngularJS-Beispiel

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Klicken Sie mich!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>

Probieren Sie es selbst aus

Anwendungshinweis:

ng-disabled Anwendung Daten mySwitch Wird die Anweisung an den HTML-Knopf gebunden disabled Eigenschaft.

ng-model Anweisung bindet den Wert des HTML-Checkbox-Elements an mySwitch Wert.

Wenn mySwitch Wert ist trueDann wird der Knopf deaktiviert:

<p>
<button disabled>Klicken Sie mich!</button>
</p>

Wenn mySwitch Wert ist falseDann wird der Knopf nicht deaktiviert:

<p>
<button>Klicken Sie mich!</button>
</p>

ng-show Anweisung

ng-show Anweisung zeigt oder verbergt HTML-Elemente.

AngularJS-Beispiel

<div ng-app="">  
<p ng-show="true">Ich bin sichtbar.</p>  
<p ng-show="false">Ich bin unsichtbar.</p>  
</div>

Probieren Sie es selbst aus

ng-show Die Anweisung basiert auf ng-show.WertHTML-Elemente anzeigen (oder verbergen).

Sie können jeden Ausdruck verwenden, der als wahr oder falsch bewertet wird:

AngularJS-Beispiel

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Ich bin sichtbar.</p>
</div>

Probieren Sie es selbst aus

Im nächsten Kapitel werden mehr Beispiele bereitgestellt, die erläutern, wie HTML-Elemente durch Klick auf einen Button versteckt werden können.

ng-hide Anweisung

ng-hide Anweisungen verstecken oder anzeigen HTML-Elemente.

AngularJS-Beispiel

<div ng-app="">  
<p ng-hide="true">Ich bin unsichtbar.</p>  
<p ng-hide="false">Ich bin sichtbar.</p>  
</div>

Probieren Sie es selbst aus