Cesco
Cesco

Il mio blog personale

Francesco
Author

Share


Tags


Resoconto su AngularJS

FrancescoFrancesco

Oggi ho studiato AngularJS, riscrivendo da zero il programma con il quale una guida turistica dovrebbe essere in grado di comporre un menù conoscendo il prezzo che pagherà e (teoricamente) potendolo inviare a noi per la verifica e la conferma.
L'avevo già abbozzato nei giorni scorsi, sempre utilizzando AngularJS, ma stavolta ho riscritto il tutto utilizzando le nozioni che ho imparato nelle ultime lezioni, e cioè:

<div ng-init="persone = ['Mino', 'Pino', 'Gino']">

  <div ng-repeat="persona in persone">
    {{ persona }}
  </div>

</div>  

Il risultato sarà

Mino  
Pino  
Gino  

Invece la direttiva ng-options consente di realizzare con pochissimo sforzo un select in HTML che contiene tutte le scelte di un array o di un oggetto. Ad esempio:

<div ng-init="persone = ['Mino', 'Pino', 'Gino']">

    <select ng-model="persona" ng-options="persona for persona in persone">
        {{ persona }}
    </select>

</div>  

Naturalmente posso usarlo anche per cose più elaborate, come ad esempio gli oggetti. Nel mio codice ad esempio ho un oggetto chiamato «portata» che a sua volta contiene un oggetto «elenco» con l'elenco di tutte le portate, che è costituito da un'array di oggetti; ognuno di questi oggetti ha la proprietà «nome» per indicare il nome del piatto e la proprietà «prezzo» per indicare quanto costa.
Così per visualizzare un select scrivo questo:

<select  
  ng-model="scelta.piatto[$index]"
  ng-options="piatto as piatto.nome for piatto in portata.elenco"
  ng-change="selezionaPiatto(scelta.piatto[$index])">
</select>  

La voce selezionata dall'utente con il select la inserisco in una variabile nello scope chiamata «scelta.piatto[< Indice >]», dove per sapere quale elemento dell'indice devo utilizzare mi viene in aiuto AngularJS che attraverso $index mi dice quale indice di portate sto analizzando.
Quando un'utente cambia la scelta del select, attraverso la direttiva ng-change chiamo una funzione in javascript contenuta nel controllo passandogli l'oggetto selezionato.

Francesco
Author

Francesco

Comments