Liste déroulante AngularJS

AngularJS vous permet de créer des listes déroulantes basées sur les éléments d'un tableau ou d'un objet.

Créer une liste déroulante avec ng-options

Si vous souhaitez créer une liste déroulante basée sur un objet ou un tableau dans AngularJS, vous devriez utiliser ng-options Commande :

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 avec ng-repeat

Vous pouvez également utiliser ng-repeat Commande pour créer la même liste déroulante :

Exemple

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Essayez-le vous-même

En raison de ng-repeat La commande répète un segment de code HTML pour chaque élément d'un tableau, donc elle peut être utilisée pour créer des options dans les listes déroulantes, mais ng-options La commande est spécialement conçue pour remplir les options des listes déroulantes.

Quelle commande devriez-vous utiliser ?

Vous pouvez utiliser ng-repeat Commande et ng-options Commande :

Assumons que vous avez un tableau d'objets :

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
;

Exemple

Utiliser ng-repeat:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1Vous avez sélectionné : {{selectedCar}}</h1>

Essayez-le vous-même

Lorsque vous utilisez une valeur en tant qu'objet, utilisez ng-value Par value:

Exemple

Remplace ng-repeat Utilisé en tant que :

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1Vous avez sélectionné un {{selectedCar.color}} {{selectedCar.model}}</h1>

Essayez-le vous-même

Exemple

Utiliser ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1Vous avez sélectionné : {{selectedCar.model}}</h1>
<pSa couleur est : {{selectedCar.color}}</p>

Essayez-le vous-même

Lorsque la valeur sélectionnée est un objet, il peut contenir plus d'informations et votre application peut être plus flexible.

Nous allons utiliser dans ce tutoriel ng-options Directive.

En tant que source de données de l'objet

Dans l'exemple précédent, la source de données est un tableau, mais nous pouvons également utiliser un objet.

Assumons que vous avez un objet avec des paires clé-valeur :

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options L'expression de l'attribut pour l'objet est légèrement différente :

Exemple

Utiliser un objet en tant que source de données,x Représente la clé,y Représente la valeur :

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1Vous avez sélectionné : {{selectedCar}}</h1>

Essayez-le vous-même

La valeur sélectionnée sera toujours dans la paire clé-valeurValeur.

Dans la paire clé-valeurValeurPeut être également un objet :

Exemple

La valeur sélectionnée restera toujours dans la paire clé-valeurValeur，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"}
};

Essayez-le vous-même

Les options de la liste déroulante ne doivent pas être des paires clé-valeurClé，elle peut également être une valeur, ou une propriété d'un objet de valeur :

Exemple

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Essayez-le vous-même