it-swarm.com.de

Wie setze ich die value-Eigenschaft in den ng-Optionen von AngularJS?

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

Wenn ich die Anweisung ng-options 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 dafür ist wirklich unklar - zumindest für einen simpleton wie mich.

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

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

Wenn resultOptions zum Beispiel ist:

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

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

548
Jukka Puranen

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 arraylabel group by group for value in arrayselect as label group by group for value in array track by trackexpr_ Für Objektdatenquellen :label for (key , value) in objectselect as label for (key , value) in objectlabel group by group for (key, value) in objectselect as label group by group for (key, value) in object

In deinem Fall sollte es so 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 value -Attribut des select -Elements mit dem Ausdruck _track by_ festzulegen.

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

Wie man sich an dieses hässliche Zeug erinnert

Allen Leuten, 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 des Listenverständnisses von Python und das Wissen, dass es mir hilft, mich sehr leicht an die Syntax zu erinnern. 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 tatsächlich die gleiche Syntax wie die erste oben aufgeführte. In _<select>_ müssen wir jedoch normalerweise zwischen dem tatsächlichen Wert im Code und dem angezeigten Text (der Bezeichnung) in einem _<select>_ -Element unterscheiden.

Wir brauchen _person.id_ im Code, aber wir wollen dem Benutzer das id nicht zeigen. wir wollen seinen Namen zeigen. Ebenso interessiert uns der _person.name_ im Code nicht. Es gibt das as Schlüsselwort, um Sachen zu beschriften. So wird es so:

_person.id as person.name for person in people
_

Anstelle von _person.id_ könnte auch die person -Instanz/-Referenz selbst benötigt werden. Siehe unten:

_person as person.name for person in people
_

Dieselbe Methode gilt auch für JavaScript-Objekte. Denken Sie daran, dass die Objekte im Objekt mit _(key, value)_ Paaren dekonstruiert werden.

687
Umur Kontacı

Wie die Wertattribute ihren Wert erhalten:

  • Wenn Sie ein Array als Datenquelle verwenden, ist dies der Index des Array-Elements in jeder Iteration.
  • Bei Verwendung eines Objekts als Datenquelle 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>
135
frm.adiputra

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

Um es richtig zu machen, habe ich so etwas in meinen ng-Optionen 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 room.price einzustellen.

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

JSON:

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

Ich habe es aus dem Blog-Post gelernt Wie man den anfänglich ausgewählten Wert eines ausgewählten Elements mit Angular.JS ng-options & track durch setzt.

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

121
Bruno Gomes

Wenn Sie den Wert Ihrer option -Elemente ä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.

47
neemzy

So senden Sie einen benutzerdefinierten Wert mit dem Namen my_hero über ein normales 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 iron oder super als Wert von my_hero.

Dies ähnelt die Antwort von @neemzy , gibt jedoch separate Daten für das value -Attribut an.

26
Philip Bulley

Es scheint, dass ng-options kompliziert (möglicherweise frustrierend) zu verwenden ist, 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 ist die geeignete Abstraktionsebene, von der aus in AngularJS gearbeitet werden kann, dass ein select-Element einen Wert im Modell auf einen Wert aus einer Abfrage setzt .

  • Wie eine Abfragezeile dem Benutzer präsentiert wird, ist das Anliegen der (V) -Ansicht, und ng-options gibt das Schlüsselwort for an, um festzulegen, wie der Inhalt des Optionselements lauten soll dh p.text for p in resultOptions.
  • Wie eine ausgewählte Zeile dem Server präsentiert wird, ist das Anliegen des (M) ODEL. Daher gibt ng-options das Schlüsselwort as an, um anzugeben, welcher Wert dem Modell wie in k as v for (k,v) in objects bereitgestellt wird.

Die richtige Lösung für dieses Problem ist dann architektonischer Natur und umfasst das Umgestalten Ihres HTML-Codes, sodass das (M) -Odel bei Bedarf die Serverkommunikation durchführt (anstelle des Benutzer, der ein Formular einreicht).

Wenn eine MVC-HTML-Seite für das jeweilige Problem nicht überarbeitet werden muss: Verwenden Sie nur den HTML-Generierungsteil der (V) iew-Komponente von AngularJS. In diesem Fall folgen Sie demselben Muster, das zum Generieren von Elementen wie &lt;li /&gt; unter &lt;ul /&gt; 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}}” />
24
Joshcodes

Du kannst das:

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

- AKTUALISIERUNG

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

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

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

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

Vorausgesetzt, ein Bereich ist wie folgt konfiguriert:

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

Das ist alles, was ich brauche, 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 track by nicht verwendet habe. Bei Verwendung von track by gibt das ausgewählte Element immer das Objekt zurück, das mit der FirmnessID übereinstimmt, und nicht die FirmnessID selbst. Dies entspricht nun meinen Kriterien, dh, es sollte ein numerischer Wert anstelle des Objekts zurückgegeben werden und ng-options verwendet werden, um die Leistungsverbesserung zu erzielen, die dadurch erzielt wird, dass nicht für jede generierte Option ein neuer Bereich erstellt wird.

Außerdem brauchte ich die leere erste Zeile, also habe ich einfach ein <option> zum <select> -Element hinzugefügt.

Hier ist ein Plunkr , das meine Arbeit zeigt.

14

Anstatt die neue Funktion "Verfolgen nach" 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, bei der die Werte die Schlüssel des Objekts/Arrays und daher 0,1,2 usw. für ein Array sind:

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

k als v wird v als v.

Ich entdeckte dies nur auf der Grundlage des gesunden Menschenverstands, wenn ich mir die Syntax ansah. (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.

11
KthProg

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, die auf Ihrem Szenario basiert.

11
blue

So habe ich das gelöst. Ich habe die Auswahl nach Wert verfolgt und die ausgewählte Elementeigenschaft 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">

vm ist mein Controller und das Land in dem Controller, der vom Dienst abgerufen wird, ist {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Als ich ein anderes Land aus der Auswahlliste ausgewählt und meine Seite mit "Speichern" gepostet habe, wurde mir das richtige Land zugewiesen.

9
Archna

Die Direktive ng-options setzt das value-Attribut nicht auf die <options> -Elemente für Arrays:

limit.value as limit.text for limit in limits bedeutet:

setze die Beschriftung von <option> auf limit.text
speichere den limit.value Wert im ng-model des Selects

Siehe Stapelüberlauffrage AngularJS ng-Optionen rendern keine Werte.

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

Ein Jahr nach der Frage musste ich eine Antwort auf diese Frage finden, da nicht von diesen zumindest mir die eigentliche Antwort gegeben wurde.

Sie haben gefragt, wie Sie die Option auswählen sollen, aber niemand hat gesagt, dass diese beiden Dinge NICHT gleich sind:

Wenn wir Optionen 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 folgende Option auszuwählen:

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

Es wird FUNKTIONIEREN.

Obwohl diese beiden Objekte die gleichen Eigenschaften haben, betrachtet AngularJS sie als UNTERSCHIEDLICH, da AngularJS mit der Referenz vergleicht.

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

3
Aleks

Die richtige Antwort auf diese Frage war bereitgestellt von user frm.adiputra , da dies derzeit die einzige Möglichkeit zu sein scheint, das value-Attribut von explizit zu steuern die Optionselemente.

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 weitere Ausdrücke, die in der Direktive ng-options verwendet werden können.

Die Verwendung von select wie in der Frage dargestellt:

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

ist grundsätzlich 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 jedoch der Fall ist wurde nur mit Gruppierung verwendet.


Aus der Dokumentation von AngularJS für ng-options:

  • 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 auf jeden Eigenschaftswert des Objekts bezieht.
  • key : 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 Wertevariable (z. B. value.propertyName).
  • select : Das Ergebnis dieses Ausdrucks wird an das Modell des übergeordneten Elements gebunden. Wenn nichts angegeben ist, wird als Standardausdruck value verwendet.
  • group : Das Ergebnis dieses Ausdrucks wird zum Gruppieren von Optionen mithilfe des DOM-Elements verwendet.
  • trackexpr : Wird beim Arbeiten mit einem Array von Objekten verwendet. Das Ergebnis dieses Ausdrucks wird verwendet, um die Objekte im Array zu identifizieren. Der trackexpr verweist höchstwahrscheinlich auf die Wertevariable (z. B. value.propertyName).
3
Majix

Je nachdem, wie Sie die Datenquelle eingestellt haben, kann die Auswahl eines Elements in ng-options etwas schwierig sein.

Nachdem ich einige Zeit mit ihnen zu kämpfen hatte, erstellte ich schließlich eine Stichprobe mit den gebräuchlichsten Datenquellen, die ich verwende. Sie finden es hier:

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

Um ng-options zum Laufen zu bringen, sind hier einige Dinge zu beachten:

  1. Normalerweise erhalten Sie die Optionen von einer Quelle und den ausgewählten Wert von einer anderen. Zum Beispiel:
    • states :: data für ng-options
    • user.state :: Option zum Setzen als ausgewählt
  2. Basierend auf 1 ist es am einfachsten/logischsten, die Auswahl mit einer Quelle zu füllen und dann den ausgewählten Wert über den Code festzulegen. Selten wäre es besser, einen gemischten Datensatz zu erhalten.
  3. Mit AngularJS können ausgewählte Steuerelemente mehr als key | label enthalten. In vielen Online-Beispielen werden Objekte als 'Schlüssel' angegeben. Wenn Sie Informationen vom Objekt benötigen, stellen Sie diese so ein, oder verwenden Sie die spezifische Eigenschaft, die Sie als Schlüssel benötigen. (ID, CODE usw.)
  4. Die Art und Weise, wie der Wert des Dropdown-/Auswahlreglers 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. B .: $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 Objekt nicht als ausgewählt festgelegt, da es unterschiedliche Hashtasten 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 $scope.myObject.myProperty ersetzen.

3
Itzco

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

Tatsächlich müssen Sie sich jedoch keine Gedanken über das Festlegen der value-Eigenschaft von select-Optionen machen. AngularJS wird sich darum kümmern. Lassen Sie mich das näher erläutern.

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 Fiddle-Ausgabe sehen können, ist es Ihr benutzerdefinierter Wert oder der von AngularJS automatisch generierte Wert 0, 1, 2, egal, ob Sie jQuery oder einen anderen Wert verwenden andere Bibliothek, um auf den Wert dieser Auswahlboxoptionen zuzugreifen und sie entsprechend zu bearbeiten.

3
Sanjay Khadka

Bitte verwenden Sie die Eigenschaft track by, die Werte und Beschriftungen im Auswahlfeld unterscheidet.

Bitte versuche

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

die Beschriftungen mit Text und Wert mit Wert (aus dem Array) zuweisen

3
Shashank Saxena

Sie können ng-options verwenden, um die Bindung von Select-Tags an Wert- und Anzeigeelemente zu erreichen

Während der Verwendung dieser Datenquelle

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

mit dem folgenden Befehl können Sie Ihr Select-Tag an Wert und Namen binden

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

es funktioniert super

3

Für ein Objekt:

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

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>
2
Ricardo Huertas

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

Ziel: Array von JSON-Objekten mit ng-option durchlaufen und ausgewähltes erstes Element setzen.

Daten:

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

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

Durch das obige Codebeispiel könnten Sie aus dieser Übertreibung herauskommen.

Ein weiteres Referenz :

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

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 ist track by os.id wichtig & sollte sein dort und os.id assollte NICHT sein vor os.name.

    • Der ng-model="my_os" sollte auf ein Objekt mit dem Schlüssel id wie my_os={id: 2} gesetzt werden.
  2. Beispiel 2 (Werteauswahl): ng-option="os.id as os.name for os in osList". Hier track by os.idsollte NICHT sein dort und os.id assollte sein dort vor os.name.

    • Der ng-model="my_os" sollte auf einen Wert wie my_os= 2 gesetzt werden

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

ngOptions Direktive:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];
  • Case-1) Label 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>
    

Ausgabebeschreibung (Angenommen, das erste Element ist 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 der Ausgabe (Angenommen, das erste Element ist ausgewählt): selectedItem = 20 // [Teil auswählen ist item.age ]

0
Masud Shrabon

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.

0
techguy2000

Wie schon viele gesagt haben, wenn ich Daten wie diese habe:

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

Ich würde es so benutzen:

<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)
0
Anjum....