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
Creare form tipizzati con Angular
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare Tailwind CSS all'interno di React: primi componenti
Installare le Web App site extension tramite una pipeline di Azure DevOps
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Potenziare Azure AI Search con la ricerca vettoriale
Evitare la script injection nelle GitHub Actions
Usare il versioning con i controller di ASP.NET Core Web API
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Creare gruppi di client per Event Grid MQTT
Utilizzare le collection expression in C#
I più letti di oggi
- C# 4
- Spaziatura tra i caratteri in Silverlight 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Segui in tempo reale il TechEd 2004
- da oggi è possibile fare login velocemente con LinkedIn e Google. a questi si aggiunge il supporto già attivo per Facebook, Twitter, Microsoft Account, Windows Hello e OpenID, per darvi sempre più possibilità di accedere semplicemente alla nostra community! #aspitalia
- Migrare una service connection a workload identity federation in Azure DevOps
- Evitare postback multipli in un UpdatePanel