AngularJS HTML HOME
AngularJS má direktivy pro vazbu dat aplikace s atributy prvků HTML DOM.
Směrnice ng-disabled
Direktiva ng-disabled váže data aplikace AngularJS s atributem disabled prvků HTML.
Příklad AngularJS
<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>
Vysvětlení aplikace:
Direktiva ng-disabled váže aplikační data mySwitch s atributem disabled tlačítka HTML .
Direktiva ng-model spojuje hodnotu prvku zaškrtávacího políčka HTML s hodnotou mySwitch .
Pokud se hodnota mySwitch vyhodnotí jako true , tlačítko bude deaktivováno:
<p>
<button disabled>Click Me!</button>
</p>
Pokud se hodnota mySwitch vyhodnotí jako false , tlačítko nebude deaktivováno:
<p>
<button>Click Me!</button>
</p>
Směrnice ng-show
Direktiva ng-show zobrazí nebo skryje element HTML.
Příklad AngularJS
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
Direktiva ng-show zobrazuje (nebo skrývá) prvek HTML na základě hodnoty ng-show.
Můžete použít jakýkoli výraz, který se vyhodnotí jako pravda nebo nepravda:
Příklad AngularJS
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
V další kapitole je více příkladů, pomocí kterých lze skrýt prvky HTML kliknutím na tlačítko.
Směrnice ng-hide
Direktiva ng-hide skryje nebo zobrazí HTML element.
Příklad AngularJS
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>