Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-02 17:31:54
original
2370 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.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal