Dall'archivio script > HTML5

Gestire dropdownlist collegate con AngularJS

di Daniele BochicchioDaniele Bochicchio, in HTML5, AngularJS,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
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