Nello script #151 abbiamo visto come utilizzato ng-options per generare dinamicamente il contenuto di una select. In questo esempio, vediamo come poter collegare facilmente il contenuto di una select alla selezione di un'altra.
Supponiamo di avere questo codice per definire il controller:
function CustomerController($scope) { $scope.provinces = [ { "name": "Milano", "cities": [ { "name": "Milano" }, { "name": "Peschiera Borromeo" }, ] }, { "name": "Roma", "cities": [ { "name": "Roma" }, { "name": "Ariccia" }, ] } ]; }
Per elencare le province in una select e poi riportare le città selezionate, ci basterà utilizzare questo markup:
<div ng-app ng-controller="CustomerController"> <select ng-model="province" ng-options="c.name for c in provinces"></select> <select ng-model="city" ng-options="p.name for p in province.cities"></select> <p>Hai scelto {{city.name}} in provincia di category={{province.name}} </p> </div>
Per approfondimenti:
L'attributo ng-options per le dropdownlist in AngularJS
https://www.html5italia.com/script/151/Lattributo-Ngoptions-Dropdownlist-AngularJS.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Miglioramenti alla leggibilità delle Media Query con le specifiche di livello 4
Utilizzare il metodo Chunk per creare blocchi di oggetti di uguali dimensioni partendo da una lista
ChatOps con GitHub
Utilizzare le Promise in Javascript - prima parte
Impostare il contenuto dell'head all'interno di ogni pagina Blazor
Migrare un progetto ASP.NET Core da .NET 6 a .NET 7
Health monitoring con Azure Container App
Gestire il timing sugli eventi all'interno di un'applicazione Blazor
Le novità di Angular 14
Offline first con Blazor e IndexedDB
Controllare lo stato di un servizio gRPC in ASP.NET Core tramite Health Check
Azure Functions e OpenAPI: la coppia perfetta!
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- .NET Conference Italia 2022 - Milano e Online
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript