AngularJS HTML HOME
AngularJS ha direttive per associare i dati dell'applicazione agli attributi degli elementi HTML DOM.
La direttiva sui disabili ng
La direttiva ng-disabled associa i dati dell'applicazione AngularJS all'attributo disabilitato degli elementi HTML.
Esempio di 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>
Applicazione spiegata:
La direttiva ng-disabled associa i dati dell'applicazione mySwitch all'attributo disabilitato del pulsante HTML .
La direttiva ng-model associa il valore dell'elemento checkbox HTML al valore di mySwitch .
Se il valore di mySwitch restituisce true , il pulsante sarà disabilitato:
<p>
<button disabled>Click Me!</button>
</p>
Se il valore di mySwitch restituisce false , il pulsante non verrà disabilitato:
<p>
<button>Click Me!</button>
</p>
La direttiva ng-show
La direttiva ng-show mostra o nasconde un elemento HTML.
Esempio di AngularJS
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
La direttiva ng-show mostra (o nasconde) un elemento HTML basato sul valore di ng-show.
Puoi usare qualsiasi espressione che restituisca true o false:
Esempio di AngularJS
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
Nel prossimo capitolo, ci sono altri esempi, usando il clic di un pulsante per nascondere gli elementi HTML.
La direttiva ng-hide
La direttiva ng-hide nasconde o mostra un elemento HTML.
Esempio di AngularJS
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>