AngularJS HTML DOM

AngularJS tilbyder kommandoer, der kan binde applikationsdata til egenskaber på HTML DOM-elementer.

ng-disabled-kommandoen

ng-disabled Kommandoen binder AngularJS-applikationsdata til HTML-elementets disabled-egenskab.

AngularJS eksempel

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

Prøv det selv

Anvendelsesbeskrivelse:

ng-disabled Kommandoen bruger applikationsdata mySwitch binder til HTML-knappens disabled egenskab.

ng-model Kommandoen binder HTML afkrydsningsfeltets værdi til mySwitch værdien.

hvis mySwitch værdien af trueSå vil knappen blive deaktiveret:

<p>
<button disabled>Tryk mig!</button>
</p>

hvis mySwitch værdien af falseSå vil knappen ikke blive deaktiveret:

<p>
<button>Tryk mig!</button>
</p>

ng-show-kommandoen

ng-show Kommandoer til at vise eller skjule HTML-elementer.

AngularJS eksempel

<div ng-app="">  
<p visabel="true">Jeg er synlig.</p>  
<p ng-show="false">Jeg er usynlig.</p>  
</div>

Prøv det selv

ng-show Instruktionen afhænger af ng-showsVærdiVis (eller skjul) HTML-elementer.

Du kan bruge enhver udtryk, der vurderes til at være sandt eller falsk:

AngularJS eksempel

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Jeg er synlig.</p>
</div>

Prøv det selv

I det næste kapitel vil der gives flere eksempler på, hvordan man bruger knaptryk til at skjule HTML-elementer.

ng-hide instruktioner

ng-hide Instruktioner til at skjule eller vise HTML-elementer.

AngularJS eksempel

<div ng-app="">  
<p ng-hide="true">Jeg er usynlig.</p>  
<p ng-hide="false">Jeg er synlig.</p>  
</div>

Prøv det selv