AngularJS vous permet de créer des listes déroulantes basées sur les éléments d'un tableau ou un objet.
Création d'une boîte de sélection utilisant ng-options
Si vous voulez créer une liste déroulante, basée sur un objet ou un tableau en AngularJS, vous devez utiliser le ng-option directive:
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>
Essayez - le vous - même » ng-options vs ng-repeat
Vous pouvez également utiliser la ng-repeat directive pour faire la même liste déroulante:
Parce que le ng-repeat directive répète un bloc de code HTML pour chaque élément dans un tableau, il peut être utilisé pour créer des options dans une liste déroulante, mais le ng-options directive a été faite spécialement pour remplir une liste déroulante des options, et a au moins un avantage important:
Dropdowns faites avec ng-options permet à la valeur sélectionnée pour être un objet, tandis que dropdowns fabriqués à partir de ng-repeat doit être une chaîne.
Que puis-je utiliser?
Supposons que vous avez un tableau d'objets:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; Le ng-repeat directive a ses limites, la valeur sélectionnée doit être une chaîne:
Exemple
Utilisation de ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Essayez - le vous - même » Lorsque vous utilisez le ng-options directive, la valeur sélectionnée peut être un objet:
Exemple
Utilisation de 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>
Essayez - le vous - même » Lorsque la valeur sélectionnée peut être un objet, il peut contenir plus d'informations, et votre application peut être plus flexible.
Nous allons utiliser le ng-options directive dans ce tutoriel.
La source de données comme un objet
Dans les exemples précédents, la source de données était un tableau, mais on peut aussi utiliser un objet.
Supposons que vous avez un objet avec des paires clé-valeur:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; L'expression dans le ng-options attribut est un peu différent pour les objets:
Exemple
L' utilisation d' un objet en tant que source de données, x repré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>
Essayez - le vous - même » La valeur sélectionnée sera toujours la valeur dans une paire de valeurs clavier.
La valeur d'une paire de valeurs clavier peut également être un objet:
Exemple
La valeur sélectionnée sera toujours la valeur dans une paire de valeurs clavier, mais cette fois il 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"}
};
Essayez - le vous - même » Les options de la liste déroulante ne possède soit la clé dans une paire -value clé, il peut aussi être la valeur, ou une propriété de l'objet de valeur:
Exemple
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Essayez - le vous - même »