AngularJS Seleziona caselle
AngularJS ti consente di creare elenchi a discesa basati su elementi in un array o un oggetto.
Creazione di una casella di selezione utilizzando ng-opzioni
Se vuoi creare un elenco a discesa, basato su un oggetto o un array in AngularJS, dovresti usare la ng-optionsdirettiva:
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>
di-opzioni vs di-ripetizione
Puoi anche usare la ng-repeatdirettiva per creare lo stesso elenco a discesa:
Esempio
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Poiché la ng-repeatdirettiva ripete un blocco di codice HTML per ogni elemento in un array, può essere utilizzata per creare opzioni in un elenco a discesa, ma la ng-optionsdirettiva è stata creata appositamente per riempire un elenco a discesa con le opzioni.
Cosa uso?
Puoi usare sia la ng-repeatdirettiva che la ng-optionsdirettiva:
Supponiamo di avere una matrice di oggetti:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Esempio
Usando ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Quando si utilizza il valore come oggetto, utilizzare ng-valueinvece di value:
Esempio
Usando ng-repeatcome oggetto:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Esempio
Usando ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Quando il valore selezionato è un oggetto, può contenere più informazioni e l'applicazione può essere più flessibile.
Useremo la ng-optionsdirettiva in questo tutorial.
L'origine dati come oggetto
Negli esempi precedenti l'origine dati era un array, ma possiamo anche utilizzare un oggetto.
Supponiamo di avere un oggetto con coppie chiave-valore:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
L'espressione ng-optionsnell'attributo è leggermente diversa per gli oggetti:
Esempio
Utilizzando un oggetto come origine dati, xrappresenta 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>
Il valore selezionato sarà sempre il valore in una coppia chiave- valore .
Il valore in una coppia chiave- valore può anche essere un oggetto:
Esempio
Il valore selezionato sarà ancora il valore in una coppia chiave- valore , solo che questa volta è 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"}
};
Le opzioni nell'elenco a discesa non devono essere la chiave in una coppia chiave -valore, può anche essere il valore o una proprietà dell'oggetto valore:
Esempio
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>