AngularJS HTML TUIS
AngularJS het riglyne vir die binding van toepassingsdata aan die eienskappe van HTML DOM-elemente.
Die ng-gestremde richtlijn
Die ng-gestremde opdrag bind AngularJS-toepassingsdata aan die gedeaktiveerde kenmerk van HTML-elemente.
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 verduidelik:
Die ng-gestremde opdrag bind die toepassingsdata mySwitch aan die HTML-knoppie se gedeaktiveerde kenmerk.
Die ng-model- aanwysing bind die waarde van die HTML-merkblokkie-element aan die waarde van mySwitch .
As die waarde van mySwitch na waar evalueer , sal die knoppie gedeaktiveer word:
<p>
<button disabled>Click Me!</button>
</p>
As die waarde van mySwitch na vals evalueer , sal die knoppie nie gedeaktiveer word nie:
<p>
<button>Click Me!</button>
</p>
Die ng-show richtlijn
Die ng-show- aanwysing wys of verberg 'n 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>
Die ng-show-aanwysing wys (of verberg) 'n HTML-element gebaseer op die waarde van ng-show.
Jy kan enige uitdrukking gebruik wat na waar of onwaar evalueer:
AngularJS Voorbeeld
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
In die volgende hoofstuk is daar meer voorbeelde, met die klik van 'n knoppie om HTML-elemente te versteek.
Die ng-hide richtlijn
Die ng-hide- instruksie versteek of wys 'n 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>