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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Paginare i risultati con QuickGrid in Blazor
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Usare il versioning con i controller di ASP.NET Core Web API
Creare form tipizzati con Angular
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Miglioramenti agli screen reader e al contrasto in Angular
Eseguire le GitHub Actions offline
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Ottimizzazione dei block template in Angular 17
I più letti di oggi
- ASP.NET Core Identity 8: è rivoluzione?
- Tutorial ASP.NET Dynamic Data Control
- Accesso dai dati con Entity Framework 7
- Utilizzare la classe XmlDataDocument per leggere un Feed RSS
- Microsoft Security Bulletin MS08-067
- Le novità di ASP.NET 4.5
- Mostrare tutti i cookie creati in fase di debug
- MIX 2011: Tutte le novità dei tool di ASP.NET MVC 3
- Usare il sensore di luminosità ambientale nelle Universal App