Comment utiliser la méthode de configuration Select Assignation ng-options dans AngularJS ?-js tutoriel-php.cn

Comment utiliser la méthode de configuration Select Assignation ng-options dans AngularJS ?

亚连

Libérer： 2018-06-02 17:31:54

original

2380 Les gens l'ont consulté

Maintenant, je vais partager avec vous une méthode de configuration ng-options d'affectation de sélection d'angularjs, qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Mode tableau

Les données sont un tableau

$scope.years = [2014, 2015, 2016];

Copier après la connexion

Éléments de page

 <select ng-model="item" ng-options="item as y for y in years">
 </select>

Copier après la connexion

Définir la valeur par défaut

Si vous devez définir l'option par défaut, vous pouvez d'abord définir un paramètre :

$scope.item = 2016;
$scope.years = [2014, 2015, 2016];

Copier après la connexion

Mode tableau d'objets

Les données sont un tableau d'objets

$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

Copier après la connexion

Éléments de page

 <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
 </select>

Copier après la connexion

Définir la valeur par défaut

Si vous devez définir l'option par défaut, vous pouvez définir un paramètre d'abord :

$scope.site = "163";
$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

Copier après la connexion

Mode tableau d'objets Key-Vules

Les données sont un tableau d'objets

$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

Copier après la connexion

Éléments de page

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

Copier après la connexion

Définir la valeur par défaut

Si vous devez définir l'option par défaut, vous pouvez d'abord définir un paramètre :

$scope.site = "BYD";
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

Copier après la connexion

API officielle d'angularjs ng-options

Type de tableau :

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr

Copier après la connexion

Type d'objet :

label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob

Copier après la connexion

Ce qui précède c'est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.