Boîtes de sélection AngularJS
AngularJS vous permet de créer des listes déroulantes basées sur des éléments d'un tableau ou un objet.
Création d'une boîte de sélection à l'aide de ng-options
Si vous souhaitez créer une liste déroulante, basée sur un objet ou un tableau dans AngularJS, vous devez utiliser la ng-optionsdirective :
Exemple
<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>
of-options vs of-repeat
Vous pouvez également utiliser la ng-repeatdirective pour créer la même liste déroulante :
Exemple
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Étant donné que la ng-repeatdirective répète un bloc de code HTML pour chaque élément d'un tableau, elle peut être utilisée pour créer des options dans une liste déroulante, mais la ng-optionsdirective a été spécialement conçue pour remplir une liste déroulante avec des options.
Qu'est-ce que j'utilise ?
Vous pouvez utiliser à la fois la ng-repeatdirective et la ng-optionsdirective :
Supposons que vous ayez un tableau d'objets :
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Exemple
Utilisation ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Lorsque vous utilisez la valeur en tant qu'objet, utilisez ng-valueau lieu devalue :
Exemple
Utiliser ng-repeatcomme objet :
<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>
Exemple
Utilisation 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>
Lorsque la valeur sélectionnée est un objet, elle peut contenir plus d'informations et votre application peut être plus flexible.
Nous utiliserons la ng-optionsdirective dans ce tutoriel.
La source de données en tant qu'objet
Dans les exemples précédents, la source de données était un tableau, mais nous pouvons également utiliser un objet.
Supposons que vous ayez un objet avec des paires clé-valeur :
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
L'expression dans l' ng-optionsattribut est un peu différente pour les objets :
Exemple
En utilisant un objet comme source de données, xreprésente la clé et
y
représente la valeur :
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
La valeur sélectionnée sera toujours la valeur d'une paire clé- valeur .
La valeur d'une paire clé- valeur peut également être un objet :
Exemple
La valeur sélectionnée sera toujours la valeur d'une paire clé- valeur , mais cette fois c'est un objet :
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Les options de la liste déroulante ne doivent pas nécessairement être la clé d'une paire clé -valeur, elles peuvent également être la valeur ou une propriété de l'objet valeur :
Exemple
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>