AngularJS Sélectionnez (case à cocher)

Précédent: AngularJS ng valeur instruction

AngularJS pouvez créer une liste déroulante des options à utiliser un tableau ou un objet.

Créer une zone de sélection à l'aide ng-options

En AngularJS nous pouvons utiliser la commandeng-option pour créer une liste déroulante des listes, la liste des éléments à travers des objets et des tableaux du cycle de la production, les exemples suivants:

Exemples

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ portée) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

Essayez »

ng-options et ng-repeat

Nous pouvons également utiliser directiveng-repeat pour créer une liste déroulante:

Exemples

<Sélectionner>
<Option ng-repeat = "x dans les noms"> {{x}} </ option>
</ Select>

Essayez »

instructionng-repeat est de parcourir le tableau de code HTML pour créer la liste déroulante, mais ng-optionscommande mieux adaptée pour la création de la liste déroulante, il présente les avantages suivants:

Un objet à l' aideng-options Options,ng-repeat est une chaîne.

Il doit être utilisé qui est mieux?

Supposons que nous utilisons les objets suivants:

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

ng-repeat a ses limites, la valeur choisie est une chaîne:

Exemples

Utiliserng-repeat:

<Choisir ng-model = "selectedSite ">
<Option ng-repeat = "x valeur dans les sites" = "{{x.url}}"> {{x.site}} </ option>
</ Select>

<H1> Votre choix est: {{selectedSite}} </ h1>

Essayez »

Utilisez la commandeng-options, sélectionnez la valeur d'un objet:

Exemples

Utilisezng-options:

<Choisir ng-modèle = "selectedSite " ng-options = "x.site pour x dans les sites">
</ Select>

<H1> Votre choix est: {{selectedSite.site}} </ h1>
<P> URL est: {{selectedSite.url}} </ p>

Essayez »

Lorsque vous sélectionnez la valeur est un objet, nous pouvons obtenir plus d'informations et des applications plus flexibles.

objet de source de données

exemple précédent, nous utilisons un tableau comme une source de données, nous avons les objets de données suivantes en tant que source de données.

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

ng-options à l' aide des objets sont très différents, comme suit:

Exemples

Utilisation de l'objet en tant que source de données,x est la clé (key),y est une valeur (valeur):

<Choisir ng-modèle = "selectedSite " ng-options = "x pour (x, y) dans des sites">
</ Select>

<H1> valeur que vous choisissez: {{selectedSite}} </ h1>

Essayez »

Votre choix est la valeur dans les paires de valeurs - clés.

valeur dans les paires de valeur - clés peut également être une cible:

Exemples

Sélectionnez la valeur de la valeur clavier de la valeur, qui est qu'il est un objet:

$ Scope.cars = {
Car01: {marque: "Ford" , modèle: "Mustang", couleur: "rouge"},
car02: {marque: "Fiat" , modèle: "500", la couleur: "blanche"},
car03: {marque: "Volvo" , modèle: "XC90", couleur: "noir"}
};

Essayez »

Ne peut pas être utilisé paires -value clés clé, utilisez les propriétés d'un objet directement dans le menu déroulant: