Hier ist, was viele Leute (einschließlich mich) zu stören scheint.

Wenn ich die ng-optionsDirektive in AngularJS verwende, um die Optionen für ein <select>Tag auszufüllen , kann ich nicht herausfinden, wie der Wert für eine Option festgelegt wird. Die Dokumentation dazu ist wirklich unklar - zumindest für einen Simpleton wie mich.

Ich kann den Text für eine Option einfach so einstellen:

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

Wann resultOptionsist zum Beispiel:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Es sollte (und ist wahrscheinlich) das Einfachste sein, die Optionswerte festzulegen, aber bisher verstehe ich es einfach nicht.

Siehe ngOptions

ngOptions (optional) - { comprehension_expression=} - in einer der folgenden Formen:

Für Array-Datenquellen : 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 Für Objektdatenquellen: 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 object

In Ihrem Fall sollte es sein

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

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

Aktualisieren

Mit den Aktualisierungen von AngularJS ist es jetzt möglich, den tatsächlichen Wert für das valueAttribut des selectElements mit track byAusdruck festzulegen.

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

Wie man sich an dieses hässliche Zeug erinnert

An alle Menschen, die es schwer haben, sich an diese Syntaxform zu erinnern: Ich stimme zu, dass dies nicht die einfachste oder schönste Syntax ist. Diese Syntax ist eine Art erweiterte Version von Pythons Listenverständnis und dem Wissen, dass ich mich sehr leicht an die Syntax erinnern kann. Es ist ungefähr so:

Python-Code:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

Dies ist eigentlich die gleiche Syntax wie die erste oben aufgeführte. In der <select>Regel müssen wir jedoch zwischen dem tatsächlichen Wert im Code und dem in a gezeigten Text (der Bezeichnung) unterscheiden<select> Element unterscheiden.

Wie brauchen wir person.idim Code, aber wir wollen das iddem Benutzer nicht zeigen ; wir wollen seinen Namen zeigen. Ebenso interessiert uns der person.nameim Code nicht. Es kommt das asSchlüsselwort, um Sachen zu beschriften. So wird es:

person.id as person.name for person in people

Oder stattdessen person.idkönnten wir die personInstanz / Referenz selbst benötigen . Siehe unten:

person as person.name for person in people

Für JavaScript-Objekte gilt dieselbe Methode. Denken Sie daran, dass die Elemente im Objekt (key, value)paarweise dekonstruiert werden.

Wie die Wertattribute ihren Wert erhalten:

• Wenn Sie ein Array als Datenquelle verwenden, ist dies der Index des Array-Elements in jeder Iteration.
• Wenn Sie ein Objekt als Datenquelle verwenden, ist dies der Eigenschaftsname in jeder Iteration.

In Ihrem Fall sollte es also sein:

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

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

Ich hatte auch dieses Problem. Ich konnte meinen Wert nicht in ng-options einstellen. Jede generierte Option wurde mit 0, 1, ..., n gesetzt.

Um es richtig zu machen, habe ich in meinen ng-Optionen so etwas gemacht:

HTML:

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

Ich benutze "track by", um alle meine Werte mit festzulegen room.price.

(Dieses Beispiel ist zum Kotzen: Wenn mehr als ein Preis gleich wäre, würde der Code fehlschlagen. Achten Sie also darauf, unterschiedliche Werte zu haben.)

JSON:

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

Ich habe es aus dem Blog-Beitrag gelernt. Wie man den ursprünglich ausgewählten Wert eines ausgewählten Elements mit Angular.JS ng-options & track by festlegt .

Schau das Video. Es ist eine schöne Klasse :)

Wenn Sie den Wert Ihrer optionElemente ändern möchten, weil das Formular schließlich an den Server gesendet wird, anstatt dies zu tun,

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

Du kannst das:

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

Der erwartete Wert wird dann über das Formular unter dem richtigen Namen gesendet.

So senden Sie einen benutzerdefinierten Wert namens my_hero , der mit einem normalen Formular an den Server :

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

Der Server erhält entweder ironoder superals Wert vonmy_hero .

Dies ähnelt der Antwort von @neemzy , gibt jedoch separate Daten für das valueAttribut an.

Es scheint ng-optionskompliziert (möglicherweise frustrierend) zu sein, aber in Wirklichkeit haben wir ein Architekturproblem.

AngularJS dient als MVC-Framework für eine dynamische HTML + JavaScript-Anwendung. Während die (V) iew-Komponente HTML- "Templating" bietet, besteht ihr Hauptzweck darin, Benutzeraktionen über einen Controller mit Änderungen im Modell zu verbinden. Daher besteht die geeignete Abstraktionsebene für die Arbeit in AngularJS darin, dass ein Auswahlelement einen Wert im Modell auf einen Wert aus einer Abfrage setzt .

• Wie eine Abfragezeile dem Benutzer angezeigt wird, ist das Anliegen von (V) iew und ng-optionsliefert das forSchlüsselwort, um zu bestimmen, wie der Inhalt des Optionselements sein soll, d p.text for p in resultOptions . H.
• Wie eine ausgewählte Zeile dem Server angezeigt wird, ist das Anliegen des (M) Geruchs. Gibt daher ng-optionsdas asSchlüsselwort an, um anzugeben, welcher Wert dem Modell wie in bereitgestellt wird k as v for (k,v) in objects.

Die richtige Lösung für dieses Problem ist dann architektonischer Natur und umfasst die Umgestaltung Ihres HTML-Codes, sodass das (M) -Geruch bei Bedarf die Serverkommunikation durchführt (anstatt dass der Benutzer ein Formular sendet ).

Wenn eine MVC-HTML-Seite für das jeweilige Problem nicht überarbeitet werden muss, verwenden Sie nur den HTML-Generierungsteil der AngularJS (V) iew-Komponente. Folgen Sie in diesem Fall demselben Muster, das zum Generieren von Elementen wie <li />'s under <ul />' verwendet wird, und platzieren Sie eine ng-Wiederholung auf einem Optionselement:

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

Als kludge kann man das name-Attribut des select-Elements immer in ein verstecktes Eingabeelement verschieben:

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

Du kannst das:

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

- UPDATE

Nach einigen Updates ist die Lösung von Benutzer frm.adiputra viel besser. Code:

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

Ich habe heute eine Weile mit diesem Problem zu kämpfen. Ich habe die AngularJS-Dokumentation, diesen und andere Beiträge sowie einige Blogs gelesen, zu denen sie führen. Sie alle haben mir geholfen, die feineren Details herauszufinden, aber am Ende scheint dies nur ein verwirrendes Thema zu sein. Hauptsächlich wegen der vielen syntaktischen Nuancen vonng-options .

Am Ende kam es für mich darauf an, dass weniger mehr ist.

Bei einem wie folgt konfigurierten Bereich:

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

Dies ist alles, was ich brauchte, um das gewünschte Ergebnis zu erzielen:

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

Beachten Sie, dass ich nicht verwendet habe track by. Wenn Sie track bydas ausgewählte Element verwenden, wird immer das Objekt zurückgegeben, das der FirmnessID entspricht, und nicht die FirmnessID selbst. Dies entspricht nun meinen Kriterien: Es sollte einen numerischen Wert anstelle des Objekts zurückgeben und zur ng-optionsErzielung der Leistungsverbesserung verwendet werden, indem nicht für jede generierte Option ein neuer Bereich erstellt wird.

Außerdem brauchte ich die leere erste Zeile, also fügte ich <option>dem <select>Element einfach eine hinzu .

Hier ist ein Plunkr , der meine Arbeit zeigt.

Anstatt die neue Funktion "Track by" zu verwenden, können Sie dies einfach mit einem Array tun, wenn die Werte mit dem Text übereinstimmen sollen:

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

Beachten Sie den Unterschied zwischen der Standardsyntax, die die Werte zu den Schlüsseln des Objekts / Arrays macht, und daher 0,1,2 usw. für ein Array:

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

k als v wird v als v .

Ich entdeckte dies nur aufgrund des gesunden Menschenverstandes, der die Syntax betrachtete. (k, v) ist die tatsächliche Anweisung, die das Array / Objekt in Schlüsselwertpaare aufteilt.

In der Anweisung 'k as v' ist k der Wert und v die Textoption, die dem Benutzer angezeigt wird. Ich denke, "Track by" ist chaotisch und übertrieben.

Dies war meiner Meinung nach für alle Szenarien am besten geeignet:

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

Hier können Sie Ihr Modell verwenden, um die Daten zu binden. Sie erhalten den Wert, den das Objekt enthält, und die Standardauswahl basierend auf Ihrem Szenario.

So habe ich das gelöst. Ich habe die Auswahl nach Wert verfolgt und die Eigenschaft für ausgewählte Elemente in meinem JavaScript-Code auf das Modell festgelegt.

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

vmist mein Controller und das Land im Controller, das vom Dienst abgerufen wurde, ist {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Als ich aus der Auswahl-Dropdown-Liste ein anderes Land ausgewählt und meine Seite mit "Speichern" gepostet habe, wurde das richtige Land gebunden.

Die ng-optionsDirektive legt das Wertattribut für die <options>Elemente für Arrays nicht fest:

Mit limit.value as limit.text for limit in limitsMitteln:

Setzen Sie die <option>Beschriftung des limit.text
Speichers als Speichern des limit.valueWerts in die Auswahlng-model

Siehe Frage zum Stapelüberlauf AngularJS ng-Optionen, die keine Werte rendern .

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

Sie können ng-options verwenden, um eine Bindung von ausgewählten Tags an Werte zu erreichen und Mitglieder anzuzeigen

Während der Verwendung dieser Datenquelle

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

Sie können das folgende verwenden, um Ihr Select-Tag an Wert und Name zu binden

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

es funktioniert super

Die richtige Antwort auf diese Frage hat der Benutzer frm.adiputra gegeben , da dies derzeit die einzige Möglichkeit zu sein scheint, das Wertattribut der Optionselemente explizit zu steuern.

Ich wollte jedoch nur betonen, dass "select" in diesem Zusammenhang kein Schlüsselwort ist, sondern nur ein Platzhalter für einen Ausdruck. In der folgenden Liste finden Sie die Definition des Ausdrucks "select" sowie anderer Ausdrücke, die in der Direktive ng-options verwendet werden können.

Die Verwendung von select, wie es in der Frage dargestellt ist:

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

ist im Wesentlichen falsch.

Basierend auf der Liste der Ausdrücke scheint es, dass trackexpr verwendet werden kann, um den Wert anzugeben, wenn Optionen in einem Array von Objekten angegeben werden, dies wurde jedoch nur für die Gruppierung verwendet.

Aus der AngularJS-Dokumentation für ng-Optionen:

• Array / Objekt : Ein Ausdruck, der zu einem Array / Objekt ausgewertet wird, über das iteriert werden soll.
• value : lokale Variable, die sich während der Iteration auf jedes Element im Array oder jeden Eigenschaftswert des Objekts bezieht.
• Schlüssel : Lokale Variable, die während der Iteration auf einen Eigenschaftsnamen im Objekt verweist.
• label : Das Ergebnis dieses Ausdrucks ist die Bezeichnung für das Element. Der Ausdruck bezieht sich höchstwahrscheinlich auf die Wertvariable (z. B. value.propertyName).
• wählen : Das Ergebnis dieses Ausdrucks wird an das Modell des übergeordneten Elements gebunden. Wenn nicht angegeben, wird für select expression standardmäßig der Wert verwendet.
• group : Das Ergebnis dieses Ausdrucks wird verwendet, um Optionen mithilfe des DOM-Elements zu gruppieren.
• trackexpr : Wird verwendet, wenn mit einem Array von Objekten gearbeitet wird. Das Ergebnis dieses Ausdrucks wird verwendet, um die Objekte im Array zu identifizieren. Der trackexpr verweist höchstwahrscheinlich auf die Wertvariable (z. B. value.propertyName).

Das Auswählen eines Elements in ng-options kann je nach Einstellung der Datenquelle etwas schwierig sein.

Nachdem ich eine Weile mit ihnen zu kämpfen hatte, machte ich ein Beispiel mit den häufigsten Datenquellen, die ich verwende. Sie finden es hier:

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

Damit ng-options funktioniert, sind folgende Punkte zu beachten:

1. Normalerweise erhalten Sie die Optionen von einer Quelle und den ausgewählten Wert von einer anderen. Zum Beispiel:
   • Zustände :: Daten für ng-Optionen
   • user.state :: Option zum Auswählen
2. Basierend auf 1 ist es am einfachsten / logischsten, die Auswahl mit einer Quelle zu füllen und dann den ausgewählten Wert durch den Code festzulegen. In seltenen Fällen wäre es besser, einen gemischten Datensatz zu erhalten.
3. Mit AngularJS können ausgewählte Steuerelemente mehr als halten key | label. In vielen Online-Beispielen werden Objekte als 'Schlüssel' angegeben. Wenn Sie Informationen vom Objekt benötigen, legen Sie diese auf diese Weise fest. Andernfalls verwenden Sie die spezifische Eigenschaft, die Sie als Schlüssel benötigen. (ID, CODE usw. Wie im plckr-Beispiel)

4. Die Art und Weise, wie der Wert des Dropdown- / Auswahlsteuerelements eingestellt wird, hängt von # 3 ab.

   • Wenn der Dropdown-Schlüssel eine einzelne Eigenschaft ist (wie in allen Beispielen im plunkr), legen Sie ihn einfach fest, z. $scope.dropdownmodel = $scope.user.state;

   • Wenn Sie das Objekt als Schlüssel festlegen, müssen Sie die Optionen durchlaufen. Selbst wenn Sie das Objekt zuweisen, wird das Element nicht als ausgewählt festgelegt, da es unterschiedliche Hashkeys hat, z.

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

Sie können savedValue für dieselbe Eigenschaft im anderen Objekt ersetzen $scope.myObject.myProperty.

Für mich ist die Antwort von Bruno Gomes die beste Antwort.

Tatsächlich müssen Sie sich jedoch keine Gedanken über das Festlegen der value-Eigenschaft ausgewählter Optionen machen. AngularJS wird sich darum kümmern. Lassen Sie mich im Detail erklären.

Bitte beachten Sie diese Geige

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

Wie Sie in der Geigenausgabe sehen können, ist es unabhängig von der Auswahl der Auswahlfeldoptionen Ihr benutzerdefinierter Wert oder der von AngularJS automatisch generierte Wert 0, 1, 2, der in Ihrer Ausgabe keine Rolle spielt, es sei denn, Sie verwenden jQuery oder einen anderen andere Bibliothek, um auf den Wert dieser Optionen zuzugreifen, wählen Sie Kombinationsfeldoptionen aus und bearbeiten Sie sie entsprechend.

Ein Jahr nach der Frage musste ich eine Antwort auf diese Frage finden, da keine von ihnen die eigentliche Antwort gab, zumindest für mich.

Sie haben gefragt, wie die Option ausgewählt werden soll, aber niemand hat gesagt, dass diese beiden Dinge NICHT gleich sind:

Wenn wir eine Option wie diese haben:

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

Und wir versuchen, eine Standardoption wie diese festzulegen:

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

Es wird NICHT funktionieren, aber wenn Sie versuchen, die Option wie folgt auszuwählen:

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

Es wird funktionieren .

Obwohl diese beiden Objekte dieselben Eigenschaften haben, betrachtet AngularJS sie als UNTERSCHIEDLICH, da AngularJS anhand der Referenz vergleicht .

Schauen Sie sich die Geige http://jsfiddle.net/qWzTb/ an .

Bitte verwenden Sie track by property, um Werte und Beschriftungen im Auswahlfeld zu unterscheiden.

Bitte versuche

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

Dadurch werden Beschriftungen mit Text und Wert mit Wert (aus dem Array) zugewiesen.

Für ein Objekt:

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

Es ist für Entwickler immer schmerzhaft, mit ng-Optionen zu arbeiten. Beispiel: Abrufen eines leeren / leeren ausgewählten Werts im Auswahl-Tag. Insbesondere beim Umgang mit JSON-Objekten in ng-Optionen wird es langwieriger. Hier habe ich einige Übungen dazu gemacht.

Ziel: Durchlaufen Sie das Array von JSON-Objekten mit der Option ng und setzen Sie das ausgewählte erste Element.

Daten:

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

Im Auswahl-Tag musste ich xyz und abc anzeigen, wobei xyz ohne großen Aufwand ausgewählt werden muss.

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>

Mit dem obigen Codebeispiel könnten Sie aus dieser Übertreibung herauskommen.

Eine weitere Referenz :

Das Tutorial ANGULAR.JS: NG-SELECT UND NG-OPTIONS hat mir geholfen, das Problem zu lösen:

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

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

Führen Sie das Code-Snippet aus und sehen Sie sich die Variationen an. Hier ist ein Hinweis zum schnellen Verständnis

1. Beispiel 1 (Objektauswahl): - ng-option="os.name for os in osList track by os.id". Hier track by os.idist wichtig & sollte da sein und os.id as sollte NICHT vorher haben os.name.

   • Das ng-model="my_os"sollte mit Schlüsseln wie auf ein Objekt gesetzt ID wie my_os={id: 2}.

2. Beispiel 2 (Wertauswahl): - ng-option="os.id as os.name for os in osList". Hier track by os.id sollte NICHT da sein und os.id as sollte vorher da sein os.name.

   • Das ng-model="my_os"sollte auf einen Wert wie gesetzt werdenmy_os= 2

Das Restcode-Snippet wird erklärt.

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>

Wie viele schon sagten, wenn ich Daten wie diese habe:

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

Ich würde es verwenden wie:

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

In Ihrem Controller müssen Sie einen Anfangswert festlegen, um das erste leere Element zu entfernen:

 $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)

So löse ich dieses Problem in einer Legacy-Anwendung:

In HTML:

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

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

Mein HTML zeigt den Optionswert richtig an.

ngOptions-Direktive:

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

• Fall-1) Bezeichnung für Wert im Array:

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

Erklärung zur Ausgabe (Angenommen, das erste Element wurde ausgewählt):

selectedItem = {name: 'a', age: 20} // [standardmäßig entspricht das ausgewählte Element dem Wert item ]

selectedItem.age = 20

• Fall 2) Wählen Sie als Bezeichnung für den Wert im Array:

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

Erläuterung zur Ausgabe (Angenommen, 1. Element ausgewählt): selectedItem = 20 // [Teil auswählen ist item.age ]