AngularJS HTML HOME
AngularJS heeft richtlijnen voor het binden van applicatiegegevens aan de attributen van HTML DOM-elementen.
De ng-handicaprichtlijn
De richtlijn ng-disabled bindt AngularJS-toepassingsgegevens aan het uitgeschakelde attribuut van HTML-elementen.
AngularJS-voorbeeld:
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Toepassing uitgelegd:
De richtlijn ng-disabled bindt de toepassingsgegevens mySwitch aan het uitgeschakelde attribuut van de HTML-knop.
De richtlijn ng-model bindt de waarde van het HTML-selectievakje aan de waarde van mySwitch .
Als de waarde van mySwitch de waarde true oplevert , wordt de knop uitgeschakeld:
<p>
<button disabled>Click Me!</button>
</p>
Als de waarde van mySwitch resulteert in false , wordt de knop niet uitgeschakeld:
<p>
<button>Click Me!</button>
</p>
De ng-show-richtlijn
De instructie ng-show toont of verbergt een HTML-element.
AngularJS-voorbeeld:
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
De richtlijn ng-show toont (of verbergt) een HTML-element op basis van de waarde van ng-show.
U kunt elke expressie gebruiken die resulteert in waar of onwaar:
AngularJS-voorbeeld:
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
In het volgende hoofdstuk zijn er meer voorbeelden, waarbij een klik op een knop wordt gebruikt om HTML-elementen te verbergen.
De ng-hide-richtlijn
De instructie ng-hide verbergt of toont een HTML-element.
AngularJS-voorbeeld:
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>