Maison  >  Article  >  interface Web  >  Comment utiliser la méthode de configuration Select Assignation ng-options dans AngularJS ?

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

亚连
亚连original
2018-06-02 17:31:542312parcourir

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];

Éléments de page

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

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];

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"}
];

É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>

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"}
];

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"}
};

Éléments de page

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

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"}
};

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

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

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.

Articles connexes :

Principes de partage des ressources du processus parent et du processus enfant NodeJS et méthodes de mise en œuvre

téléchargement de soumission du formulaire Vue Axios Exemples d'images

Exemple de code pour télécharger des images et des fichiers dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn