Comment la valeur des attributs reçoit sa valeur:

• Lorsqu'on utilise un tableau comme source de données, ce sera l'indice de l'élément du tableau dans chaque itération;
• Lorsqu'on utilise un objet comme source de données, ce sera le nom de la propriété dans chaque itération.

donc dans votre cas il devrait être:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

j'ai eu ce problème aussi. Je n'ai pas pu définir ma valeur dans les options ng. Chaque option générée a été définie avec 0, 1, ..., N.

pour que ce soit juste, j'ai fait quelque chose comme ça dans mon ng-options:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

j'utilise" track by "pour définir toutes mes valeurs avec room.price .

(cet exemple craint: parce que s'il y avait plus d'un prix égal, le code échouerait. Pour ÊTRE SÛR d'avoir des valeurs différentes.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

je l'ai appris de blog Comment définir la sélection initiale de la valeur d'un élément select à l'aide Angulaire.JS ng-options et suivi par .

voir la vidéo. C'est une classe agréable :)

si vous voulez changer la valeur de vos éléments option parce que le formulaire sera éventuellement soumis au serveur, au lieu de le faire,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Vous pouvez faire ceci:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

La valeur attendue sera ensuite envoyé via le formulaire sous le nom correct.

pour envoyer une valeur personnalisée appelée my_hero au serveur en utilisant un formulaire normal soumettre:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

le serveur recevra iron ou super comme valeur de my_hero .

c'est similaire à la réponse de @neemzy , mais en spécifiant des données séparées pour l'attribut value .

il semble que ng-options soit compliqué (peut-être frustrant) à utiliser, mais en réalité nous avons un problème d'architecture.

AngularJS Sert de cadre MVC pour une application dynamique HTML+JavaScript. Alors que son (V)IEW component offre HTML "templating", son but principal est de connecter les actions de l'utilisateur, via un contrôleur, aux changements du modèle. Par conséquent le niveau approprié d'abstraction, dont pour travailler dans AngularJS, c'est qu'un élément select définit une valeur dans le modèle à une valeur à partir d'une requête .

• comment une ligne d'interrogation est présentée à l'utilisateur est la (V)préoccupation de iew et ng-options fournit le mot-clé for pour dicter ce que le contenu de l'élément d'option devrait être c.-à-d. p.text for p in resultOptions .
• comment une ligne sélectionnée est présentée au serveur est la (M)préoccupation d'odel. Donc ng-options fournit le mot-clé as pour spécifier quelle valeur est fournie au modèle comme dans k as v for (k,v) in objects .

la bonne solution ce problème est alors de nature architecturale et implique le remaniement de votre HTML de sorte que le (M)odel effectue la communication serveur lorsque requis (au lieu de l'utilisateur soumettant un formulaire).

si une page problème à portée de la main: ensuite, utilisez uniquement la partie de génération HTML du composant IEW D'AngularJS (V). Dans ce cas, suivre le même modèle que celui utilisé pour générer des éléments tels que <li /> 's sous <ul /> 's et placer un ng-repeat sur un élément d'option:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

comme kludge , on peut toujours déplacer l'attribut name de l'élément select vers un élément d'entrée caché:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Vous pouvez faire ceci:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- UPDATE

Après quelques mises à jour, utilisateur frm.adiputra solution est beaucoup mieux. Code:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

j'ai lutté avec ce problème pendant un certain temps aujourd'hui. J'ai lu à travers la documentation AngularJS, ceci et d'autres Billets et quelques blogs qu'ils mènent. Ils m'ont tous aidé à éplucher les détails les plus fins, mais à la fin cela semble juste être un sujet confus. Principalement en raison des nombreuses nuances syntaxiques de ng-options .

En fin de compte, pour moi, il est descendu à moins est plus.

étant donné une portée configurée comme suit:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

C'est tout ce dont j'avais besoin pour obtenir le résultat désiré:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

avis je n'ai pas utilisé track by . En utilisant track by l'article sélectionné retournerait toujours l'objet qui correspondait au FirmnessID, plutôt que le FirmnessID lui-même. Cela répond maintenant à mes critères, qui est qu'il doit retourner une valeur numérique plutôt que l'objet, et d'utiliser ng-options pour obtenir l'amélioration de performance qu'il fournit en ne créant pas une nouvelle portée pour chaque option générée.

aussi, j'avais besoin de la première rangée vide, donc j'ai simplement ajouté un <option> à l'élément <select> .

voici un Plunkr qui montre mon travail.

au lieu d'utiliser la nouvelle fonctionnalité 'track by' vous pouvez simplement le faire avec un tableau si vous voulez que les valeurs soient les mêmes que le texte:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

noter la différence entre la syntaxe standard, qui fera les valeurs des clés de L'objet/tableau, et donc 0,1,2 etc. pour un tableau:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k comme v devient v comme v .

j'ai découvert ceci juste basé sur le bon sens en regardant la syntaxe. (k,v) est l'instruction qui divise le tableau/objet en paires clé-valeur.

Dans le "k tel que v' instruction, k sera la valeur, et v sera le texte affiché à l'utilisateur. Je pense que "track by" est compliqué et exagéré.

cela était le mieux adapté pour tous les scénarios selon moi:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

où vous pouvez utiliser votre modèle pour lier les données. Vous obtiendrez la valeur que l'objet contiendra et la sélection par défaut basée sur votre scénario.

C'est comme ça que j'ai résolu ça. J'ai suivi la valeur select by et j'ai placé la propriété item selected sur le modèle dans mon code JavaScript.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm est mon contrôleur et le Pays dans le contrôleur extraites du service est {CountryId =1, Code = 'USA', CountryName='United States of America'} .

lorsque j'ai sélectionné un autre pays dans la liste déroulante de select et que j'ai affiché ma page avec" Save", j'ai obtenu le bon pays à destination.

la directive ng-options ne définit pas l'attribut de valeur sur les éléments <options> pour les tableaux:

utilisant limit.value as limit.text for limit in limits signifie:

a placé l'étiquette de <option> comme limit.text

enregistrez la valeur limit.value dans le select ng-model

Voir Débordement de Pile question AngularJS ng-options pas rendu les valeurs .

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

la bonne réponse à cette question a été fournie par l'utilisateur frm.adiputra , comme actuellement cela semble être la seule façon de contrôler explicitement l'attribut valeur des éléments d'option.

Cependant, je voulais juste souligner que "select" n'est pas un mot-clé dans ce contexte, mais c'est juste un espace réservé pour une expression. Veuillez vous référer à la liste suivante, pour la définition de la "sélection", expression que ainsi que d'autres expressions qui peuvent être utilisées dans la directive ng-options.

l'utilisation de select telle qu'elle est dépeinte dans la question:

ng-options='select p.text for p  in resultOptions'

est essentiellement erroné.

basé sur la liste des expressions, il semble que trackexpr peut être utilisé pour spécifier la valeur, quand les options sont données dans un tableau d'objets, mais il a été utilisé avec le groupement seulement.

de la documentation D'AngularJS pour ng-options:

• tableau / objet : une expression qui renvoie un tableau / objet de itérer sur.
• valeur : variable locale qui se référera à chaque élément le tableau ou la valeur de chaque propriété de l'objet pendant l'itération.
• clé : variable locale qui se réfère à un nom de propriété dans objet lors de l' itération.
• étiquette : le résultat de cette expression sera l'étiquette pour élément. L'expression fera très probablement référence à la valeur variable (ex: valeur.propertyName).
• , sélectionnez : Le résultat de cette expression sera lié au modèle de l'élément parent. Si elle n'est pas spécifiée, select expression sera par défaut à value.
• groupe : le résultat de cette expression sera utilisé pour grouper les options en utilisant le DOM élément.
• trackexpr : utilisé pour travailler avec un tableau d'objets. Le résultat de cette expression sera utilisée identifier les objets dans le tableau. La trackexpr fera très probablement référence à la variable de valeur (p. ex. valeur.propertyName).

sélectionner un élément dans ng-options peut être un peu délicat en fonction de la façon dont vous définissez la source de données.

après avoir lutté avec eux pendant un certain temps, j'ai fini par faire un échantillon avec les sources de données les plus courantes que j'utilise. Vous pouvez le trouver ici:

http://plnkr.co/edit/fGq2PM?p=preview

maintenant pour faire fonctionner ng-options, voici quelques choses à considérer:

1. normalement vous récupérez les options d'une source et la valeur sélectionnée d'une autre. Exemple:
   • :: ng-options
   • de l'utilisateur.état:: Option pour définir comme sélectionné
2. basé sur 1, la chose la plus facile/logique à faire est de remplir le select avec une source et ensuite définir le code trough valeur sélectionnée. Il serait rarement préférable d'obtenir un ensemble de données mixte.
3. AngularJS permet de sélectionner les commandes doivent contenir plus de key | label . De nombreux exemples en ligne mettent des objets comme "clé", et si vous avez besoin d'informations à partir de l'objet l'a placé de cette façon, sinon utiliser la propriété spécifique dont vous avez besoin comme clé. (ID, CODE, etc.. Comme dans l'échantillon plckr)

4. la façon de définir la valeur du contrôle dropdown/select dépend de #3,

   • si la touche dropdown est une propriété unique (comme dans tous les exemples du plunkr), il vous suffit de la définir, par exemple: $scope.dropdownmodel = $scope.user.state;

   • si vous définissez l'objet comme clé, vous devez boucler les options, même en assignant l'objet ne définira pas l'élément tel qu'il a été sélectionné, car ils auront différents hashkeys, par exemple:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }
     

Vous pouvez remplacer savedValue pour la même propriété dans l'autre objet, $scope.myObject.myProperty .

Pour moi la réponse de Bruno Gomes est la meilleure réponse.

mais en fait, vous n'avez pas besoin de vous soucier de définir la propriété de valeur de select options. AngularJS prendra soin de cela. Laissez-moi vous expliquer en détail.

s'il vous Plaît envisager ce violon

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

comme vous pouvez le voir dans la sortie fiddle, peu importe ce que vous choisissez pour les options select box, c'est votre valeur personnalisée, ou la valeur 0, 1, 2 générée automatiquement par AngularJS, cela n'a pas d'importance dans votre sortie à moins que vous utilisiez jQuery ou toute autre bibliothèque pour accéder à la valeur des options de la boîte bascule et la manipuler en conséquence.

Un an après la question, j'ai dû trouver une réponse à cette question, car aucun de ces a donné la réponse exacte, au moins pour moi.

vous avez demandé comment sélectionner l'option, mais personne n'a dit que ces deux choses sont pas la même chose:

si nous avons une option comme celle-ci:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

et nous essayons de définir une option par défaut comme celle-ci:

$scope.incorrectlySelected = { label: 'two', value: 2 };

il sera ne fonctionne pas , mais si vous essayez de sélectionner l'option comme ceci:

$scope.correctlySelected = $scope.options[1];

Il TRAVAIL .

bien que ces deux objets aient les mêmes propriétés, AngularJS les considère comme différents parce Qu'AngularJS compare par la référence .

regardez le violon http://jsfiddle.net/qWzTb / .

pour un objet:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

il est toujours douloureux pour les développeurs à avec ng-options. Par exemple: obtenir une valeur vide/vide sélectionnée dans la balise select. Surtout quand on traite avec des objets JSON dans ng-options, cela devient plus fastidieux. Ici, j'ai fait quelques exercices sur que.

Objectif: Itérer tableau d'objets JSON par ng-option et sélectionné premier élément.

Data:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

dans la balise select j'ai dû montrer xyz et abc, où xyz doit être sélectionné sans trop d'effort.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

par exemple de code ci-dessus, vous pourriez sortir de cette exagération.

l'Autre de référence :

Le tutoriel ANGULAIRE.JS: NG-SELECT et NG-OPTIONS m'a aidé à résoudre le problème:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

s'il vous plaît utiliser piste par propriété qui différencient les valeurs et les étiquettes dans la boîte de sélection.

essayez

<select ng-options="obj.text for obj in array track by obj.value"></select>

qui assignera des étiquettes avec du texte et de la valeur avec de la valeur (à partir du tableau)

vous pouvez utiliser ng-options pour réaliser la fixation d'étiquettes select pour évaluer et afficher les membres""

tout en utilisant cette source de données

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

vous pouvez utiliser ce qui suit pour lier votre étiquette select à la valeur et au nom

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

il fonctionne très bien

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Lancez l'extrait de code et voyez les variations. Voici une note pour une compréhension rapide

1. exemple 1(Sélection D'objet): - ng-option="os.name for os in osList track by os.id" . Ici track by os.id est important et devrait être là et os.id as ne devrait pas avoir avant os.name .

   • le ng-model="my_os" doit définir un objet avec la clé comme id comme my_os={id: 2} .

2. exemple 2(Sélection des valeurs): - ng-option="os.id as os.name for os in osList" . Ici track by os.id ne devrait pas être là et os.id as devrait être là avant os.name .

   • le ng-model="my_os" devrait être réglé à une valeur comme my_os= 2

l'extrait du code de repos expliquera.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

comme beaucoup l'ont dit avant, si j'ai des données quelque chose comme ceci:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

Je l'utiliserais comme:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

dans votre Controller vous devez définir une valeur initiale pour se débarrasser du premier article vide:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Voici comment je résous ce problème dans une application ancienne:

en HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

En JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

mon HTML affiche correctement la valeur de l'option.

ngOptions directive:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• Case - 1) étiquette pour la valeur dans le tableau:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>
  

explication de la sortie (supposons que le premier élément est sélectionné):

selectedItem = {nom: 'a', âge: 20} // [par défaut, l'élément sélectionné est égale à la valeur élément ]

selectedItem.âge = 20

• Case-2) Sélectionnez comme étiquette pour la valeur dans le tableau:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>
  

explication de la sortie (en supposant que le 1er élément est sélectionné)): selectedItem = 20 // [sélectionner une partie est .âge ]