Dall'archivio script > HTML5

L'attributo ng-options per le dropdownlist in AngularJS

di Daniele BochicchioDaniele Bochicchio, in HTML5, AngularJS,

La direttiva ng-options può essere utilizzata per generare dinamicamente il contenuto di una select ed andrebbe utilizzata in luogo di ng-repeat, perché offre performance migliori.

Supponiamo di avere una serie di opzioni, all'interno del solito controller:

app.controller('peopleController', ['$scope', function($scope) {
    $scope.provinces = [
      {name:'Milano', area:'Nord', disabled:false},
      {name:'Torino', area:'Nord', disabled:false},
      {name:'Roma', area:'Centro', disabled:true},
      {name:'Bologna', area:'Centro', disabled:false},
      {name:'Napoli', area:'Sud', disabled:false},
      {name:'Palermo', area:'Sud', disabled:false}
    ];
    
    // impostiamo la provincia selezionata
    $scope.currentProvince = $scope.provinces[0];
}]);

Per elencare gli elementi presenti nell'array, ci basterà questa sintassi:

<select 
    ng-model="currentProvince"
    ng-options="province.name for province in provinces">
  <option value="">Seleziona un valore</option>
</select>

Utilizzando l'attributo ng-options andiamo a recuperare, utilizzando una particolare sintassi, la proprietà specifica che vogliamo utilizzare. Da notare anche l'uso dell'attributo ng-model, che utilizzeremo per impostare e leggere il valore selezionato e che funziona con il two-way databinding di AngularJS.

Per raggruppare gli elementi in base ad una proprietà, ci basterà utilizzare questa sintassi:

<select
    ng-model="currentProvince"
    ng-options="province.name group by province.area for province in provinces">
</select>

Mentre per disabilitare eventuali elementi, dovremo sfruttare questa forma, indicando la proprietà che imposta il campo come disabilitato:

<select
    ng-model="currentProvince"
    ng-options="province.name group by province.area disable when province.disabled for province in provinces">
</select>

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi