DOM HTML AngularJS

AngularJS fornisce istruzioni che associano i dati dell'applicazione ai attributi degli elementi del DOM HTML.

Istruzione ng-disabled

istruzione ng-disabled L'istruzione associa i dati dell'applicazione AngularJS alla proprietà disabled degli elementi HTML.

Esempio AngularJS

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Clicca su di me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Pulsante
</p>
<p>
{{ mySwitch }}
</p>
</div>

Prova personalmente

Spiegazione dell'applicazione:

istruzione ng-disabled Applica i dati dell'applicazione mySwitch L'istruzione bind di ng-disabled è associato all'istruzione HTML del pulsante proprietà

proprietà ng-model. L'istruzione associa il valore dell'elemento casella di controllo HTML al mySwitch sul valore.

Se mySwitch Il valore è trueIl pulsante verrà disabilitato:

<p>
<button disabled>Clicca su di me!</button>
</p>

Se mySwitch Il valore è falseSe non viene specificato, il pulsante non verrà disabilitato:

<p>
<button>Clicca su di me!</button>
</p>

Istruzione ng-show

ng-show L'istruzione mostra o nasconde gli elementi HTML.

Esempio AngularJS

<div ng-app="">  
<p ng-show="true">Sono visibili.</p>  
<p ng-show="false">Non sono visibile.</p>  
</div>

Prova personalmente

ng-show L'indicazione è basata su ng-show dellaValoreMostra (o nascondi) gli elementi HTML.

Puoi usare qualsiasi espressione valutata come vero o falso:

Esempio AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Sono visibile.</p>
</div>

Prova personalmente

Nel capitolo successivo, verranno forniti ulteriori esempi su come nascondere gli elementi HTML tramite il clic sui pulsanti.

Direttiva ng-hide

ng-hide L'indicazione nasconde o mostra gli elementi HTML.

Esempio AngularJS

<div ng-app="">  
<p ng-hide="true">Non sono visibile.</p>  
<p ng-hide="false">Sono visibile.</p>  
</div>

Prova personalmente