AngularJS consente di creare elenchi a discesa sulla base di elementi di un array, o di un oggetto.
Creazione di una casella di selezione Utilizzando NG-opzioni
Se si desidera creare un elenco a discesa, sulla base di un oggetto o una matrice in AngularJS, è necessario utilizzare il ng-option direttiva:
Esempio
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias",
"Linus"];
});
</script>
Prova tu stesso " NG-opzioni vs ng-repeat
È inoltre possibile utilizzare il ng-repeat direttiva per rendere lo stesso elenco a discesa:
Poiché il ng-repeat direttiva ripete un blocco di codice HTML per ogni elemento in un array, esso può essere utilizzato per creare opzioni in un elenco a discesa, ma la ng-options direttiva è stata fatta appositamente per riempire un elenco a discesa con le opzioni, e ha almeno un importante vantaggio:
Dropdowns realizzati con ng-options permette il valore selezionato per essere un oggetto, mentre menu a discesa realizzati ng-repeat deve essere una stringa.
Cosa posso usare?
Si supponga di avere un array di oggetti:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; Il ng-repeat direttiva ha i suoi limiti, il valore selezionato deve essere una stringa:
Esempio
Utilizzando ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Prova tu stesso " Quando si utilizza il ng-options direttiva, il valore selezionato può essere un oggetto:
Esempio
Utilizzando ng-options :
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
Prova tu stesso " Quando il valore selezionato può essere un oggetto, esso può contenere più informazioni, e l'applicazione può essere più flessibile.
Useremo il ng-options direttiva in questo tutorial.
L'origine dati come un oggetto
Negli esempi precedenti la fonte dei dati è una matrice, ma possiamo anche utilizzare un oggetto.
Supponete di avere un oggetto con coppie chiave-valore:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; L'espressione nella ng-options attributo è un po 'diverso per gli oggetti:
Esempio
L'utilizzo di un oggetto come l'origine dei dati, x rappresenta la chiave, e y rappresenta il valore:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Prova tu stesso " Il valore selezionato sarà sempre il valore in una coppia di valori tastiera.
Il valore in una coppia di valori tastiera può anche essere un oggetto:
Esempio
Il valore selezionato sarà ancora il valore in una coppia di valori tastiera, solo che questa volta si tratta di un oggetto:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Prova tu stesso " Le opzioni nell'elenco a discesa non ha essere la chiave in una coppia -value chiave, può anche essere il valore, o una proprietà dell'oggetto di valore:
Esempio
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Prova tu stesso "