AngularJS HTML DOM

AngularJS erbjuder anvisningar som kan binda applikationsdata till egenskaperna på HTML DOM-elementen.

ng-disabled-anvisningen

ng-disabled Anvisningen binder AngularJS-applikationsdata till HTML-elementens disabled-egenskap.

AngularJS exempel

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

Prova själv

Anvisningstillämpning:

ng-disabled applikationsdata mySwitch Anvisningen binder Inaktiverad egenskapen.

ng-model Anvisningen binder värdet på HTML-kryssrutor till mySwitch värdet.

om mySwitch värdet är truekommer knappen att bli inaktiverad:

<p>
<button disabled>Klicka på mig!</button>
</p>

om mySwitch värdet är falseOm så inte är fallet kommer knappen inte att vara inaktiverad:

<p>
<button>Klicka på mig!</button>
</p>

ng-show-anvisningen

ng-show Anvisningen visar eller döljer HTML-element.

AngularJS exempel

<div ng-app="">  
<p ng-show="true">Jag är synlig.</p>  
<p ng-show="false">Jag är osynlig.</p>  
</div>

Prova själv

ng-show Instruktioner baseras på ng-showsVärdeVisa (eller dölj) HTML-element.

Du kan använda alla uttryck som bedöms som sant eller falskt:

AngularJS exempel

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Jag är synlig.</p>
</div>

Prova själv

I nästa kapitel kommer fler exempel att ges om hur man använder knapptryckningar för att dölja HTML-element.

ng-hide-instruktioner

ng-hide Instruktioner för att dölja eller visa HTML-element.

AngularJS exempel

<div ng-app="">  
<p ng-hide="true">Jag är osynlig.</p>  
<p ng-hide="false">Jag är synlig.</p>  
</div>

Prova själv