DOM HTML AngularJS

Le seguenti direttive vengono utilizzate per vincolare i dati dell'applicazione agli attributi degli elementi DOM HTML-

Numero	Nome e descrizione
1	`ng-disabled` Disabilita il controllo specificato.
2	`ng-show` Mostra il controllo specificato.
3	`ng-hide` Nasconde il controllo specificato.
4	`ng-click` Rappresenta l'evento click di AngularJS.

direttiva ng-disabled

Aggiungi l'attributo ng-disabled all'elemento HTML del pulsante e passalo al modello. Lega il modello al pulsante della casella di controllo e osserva le variazioni.

<input type="checkbox" ng-model="enableDisableButton">Disabilita Bottone<button ng-disabled="enableDisableButton">Clicca su di Me!</button>

Istruzione ng-show

Aggiungi l'attributo ng-show a un pulsante HTML e passalo al modello. Bindi il modello al casella di controllo e osserva le variazioni.

<input type="checkbox" ng-model="showHide1">Mostra pulsante<button ng-show="showHide1">Clicca su di me!</button>

Istruzione ng-hide

Aggiungi l'attributo ng-hide a un pulsante HTML e passalo al modello. Bindi il modello al casella di controllo e osserva le variazioni.

<input type="checkbox" ng-model="showHide2">Nascondi pulsante<button ng-hide="showHide2">Clicca su di me!</button>

Istruzione ng-click

Aggiungi l'attributo ng-click a un pulsante HTML e aggiorna il modello. Bindi il modello all'HTML e osserva le variazioni.

<p>Totali clic: {{ clickCounter }}</p><button ng-click="clickCounter = clickCounter + 1">Clicca su di me!</button>

Esempio online

Il seguente esempio mostra l'uso di tutte le istruzioni menzionate sopra.

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>AngularJS HTML DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Esempio AngularJS-HTML DOM (oldtoolbag.com)</h2>
　　　　　　
　　　　　　<div ng-app="">
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="enableDisableButton">Disabilita pulsante</td>
　　　　　　　　　　　　　　　<td><button ng-disabled="enableDisableButton">Clicca su di me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide1">Mostra pulsante</td>
　　　　　　　　　　　　　　　<td><button ng-show="showHide1">Clicca su di me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide2"> Nascondi pulsante</td>
　　　　　　　　　　　　　　　<td><button ng-hide="showHide2">Clicca su di me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><p>Contatore di click: {{ clickCounter }}</p></td>
　　　　　　　　　　　　　　　<td><button ng-click="clickCounter = clickCounter + 1">Clicca su di me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Prova a vedere‹/›

Risultato di output

Apri il file nel browser webtestAngularJS.htme visualizza i risultati.

Moduli AngularJS Tabelle AngularJS