AngularJS Select

AngularJS peut utiliser des tableaux ou des objets pour créer des options de liste déroulante.

Utilisez ng-options pour créer une liste déroulante

Dans AngularJS, on peut utiliserng-optionLa directive est utilisée pour créer une liste déroulante, et les éléments de la liste sont générés en parcourant des objets et des tableaux, comme dans l'exemple suivant :

Exemple

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" 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 = ["Google", "Example", "Taobao"]; }); </script>

Essayez-le vous-même »

ng-init pour définir la valeur sélectionnée par défaut.

ng-options et ng-repeat

Nous pouvons également utiliserng-repeatcomme directive pour créer une liste déroulante :

Exemple

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

Essayez-le vous-même »

ng-repeatLa directive parcourt les tableaux avec du code HTML pour créer des listes déroulantes, maisng-optionsla directive est plus adaptée pour créer des listes déroulantes, et elle présente les avantages suivants :

Utilisationng-optionsl'option est un objet,ng-repeatest une chaîne.

Lequel vaut-il mieux utiliser ?

Supposons que nous utilisions l'objet suivant :

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Example", url : "http://www.example.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeatIl y a des limitations, la valeur sélectionnée est une chaîne :

Exemple

Utilisationng-repeat:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>Vous avez sélectionné :{{selectedSite}}</h1>

Essayez-le vous-même »

Utilisationng-optionsdirective, la valeur sélectionnée est un objet :

Exemple

Utilisationng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>Vous avez sélectionné :{{selectedSite.site}}</h1>
<p>L'URL est :{{selectedSite.url}}</p>

Essayez-le vous-même »

Lorsque la valeur sélectionnée est un objet, nous pouvons obtenir plus d'informations, et l'application est plus flexible.

La source de données est un objet

Dans les exemples précédents, nous avons utilisé un tableau comme source de données ; ci-dessous, nous utiliserons un objet de données comme source de données.

$scope.sites = {
    site01 : "Google",
    site02 : "Example",
    site03 : "Taobao"
};

ng-optionsL'utilisation d'objets fait une grande différence, comme montré ci-dessous :

Exemple

En utilisant un objet comme source de données,xcomme clé,ycomme valeur :

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>La valeur que vous avez sélectionnée est :{{selectedSite}}</h1>

Essayez-le vous-même »

La valeur que vous sélectionnez est dans la clé-valeurdans la pairevaleur。

valeurdans la clé-valeurpaire, il peut aussi être un objet :

Exemple

La valeur sélectionnée se trouve dans la clé-valeurde la pairevaleurpaire, dans ce cas, il s'agit d'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 »

Dans le menu déroulant, vous pouvez également ne pas utiliserkeydans la paire -valeurkey, et utiliser directement les propriétés de l'objet :

Exemple

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

Essayez-le vous-même »
autres extensions