Oto, co wydaje się niepokoić wielu ludzi (w tym mnie).

Kiedy używam ng-optionsdyrektywy w AngularJS do wypełnienia opcji dla <select>znacznika, nie mogę wymyślić, jak ustawić wartość dla opcji. Dokumentacja tego jest naprawdę niejasna - przynajmniej dla takiego prostaka jak ja.

Mogę łatwo ustawić tekst dla opcji tak:

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

Kiedy resultOptionsjest na przykład:

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

Powinno być (i prawdopodobnie jest) najprostsze ustawienie wartości opcji, ale jak dotąd nie rozumiem.

Zobacz ngOptions

ngOptions (opcjonalnie) - { comprehension_expression=} - w jednej z następujących postaci:

W przypadku źródeł danych tablicowych : 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 W przypadku źródeł danych obiektowych: 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

W twoim przypadku tak powinno być

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

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

Aktualizacja

Dzięki aktualizacjom AngularJS można teraz ustawić rzeczywistą wartość valueatrybutu selectelementu z track bywyrażeniem.

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

Jak zapamiętać te brzydkie rzeczy

Wszystkim ludziom, którzy mają trudności z zapamiętaniem tej formy składni: Zgadzam się, że nie jest to najłatwiejsza i najpiękniejsza składnia. Ta składnia jest swego rodzaju rozszerzoną wersją rozumienia list w Pythonie i wiedza, która pomaga mi bardzo łatwo zapamiętać składnię. To jest coś takiego:

Kod Python:

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

Jest to w rzeczywistości ta sama składnia, co pierwsza wymieniona powyżej. Jednak w <select>zwykle musimy rozróżnić rzeczywistą wartość w kodzie i tekst wyświetlany (etykieta) w <select>elemencie.

Potrzebujemy person.idkodu, ale nie chcemy pokazywać idtego użytkownikowi; chcemy pokazać jego nazwę. Podobnie, nie jesteśmy zainteresowani person.namekodem. Pojawia się assłowo kluczowe do oznaczania rzeczy. Więc wygląda to tak:

person.id as person.name for person in people

Lub zamiast tego person.idpotrzebowalibyśmy samej personinstancji / referencji. Patrz poniżej:

person as person.name for person in people

W przypadku obiektów JavaScript obowiązuje również ta sama metoda. Pamiętaj tylko, że przedmioty w obiekcie są zdekonstruowane za pomocą (key, value)par.

Jak atrybuty wartości uzyskują wartość:

• Gdy używasz tablicy jako źródła danych, będzie to indeks elementu tablicy w każdej iteracji;
• W przypadku używania obiektu jako źródła danych będzie to nazwa właściwości w każdej iteracji.

W twoim przypadku powinno to być:

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

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

Też miałem ten problem. Nie byłem w stanie ustawić mojej wartości w opcjach ng. Każda wygenerowana opcja została ustawiona na 0, 1, ..., n.

Aby to zrobić, zrobiłem coś takiego w moich opcjach ng:

HTML:

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

Korzystam z funkcji „śledź według”, aby ustawić wszystkie moje wartości room.price.

(Ten przykład jest do kitu: ponieważ gdyby cena była równa więcej niż jednej cenie, kod się nie powiedzie. Upewnij się, że mają różne wartości.)

JSON:

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

Nauczyłem się tego z postu na blogu Jak ustawić początkową wybraną wartość elementu select za pomocą Angular.JS ng-options i śledzić według .

Obejrzyj wideo. To fajna klasa :)

Jeśli chcesz zmienić wartość swoich optionelementów, ponieważ formularz zostanie ostatecznie przesłany na serwer, zamiast tego,

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

Możesz to zrobić:

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

Oczekiwana wartość zostanie następnie przesłana za pośrednictwem formularza pod prawidłową nazwą.

Aby wysłać niestandardową wartość o nazwie my_hero na serwer za pomocą zwykłego formularza, prześlij:

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

Serwer otrzyma albo ironalbo superjako wartośćmy_hero .

Jest to podobne do odpowiedzi @neemzy , ale określa osobne dane dla valueatrybutu.

Wydaje się, że korzystanie z niego ng-optionsjest skomplikowane (być może frustrujące), ale w rzeczywistości mamy problem z architekturą.

AngularJS służy jako środowisko MVC dla dynamicznej aplikacji HTML + JavaScript. Podczas gdy jego komponent (V) iew oferuje szablony HTML, jego głównym celem jest łączenie działań użytkownika za pośrednictwem kontrolera ze zmianami w modelu. Dlatego odpowiedni poziom abstrakcji, z którego można pracować w AngularJS, polega na tym, że element select ustawia wartość w modelu na wartość z zapytania .

• Sposób, w jaki wiersz zapytania jest prezentowany użytkownikowi, stanowi problem (V) iew i ng-optionszapewnia forsłowo kluczowe, które decyduje o tym, jaka powinna być zawartość elementu opcji, tj p.text for p in resultOptions .
• Sposób, w jaki wybrany wiersz jest prezentowany na serwerze, jest problemem (M) odela. Dlatego ng-optionszapewnia assłowo kluczowe, aby określić, jaka wartość ma być dostarczana do modelu, jak w k as v for (k,v) in objects.

Prawidłowe rozwiązanie tego problemu ma wówczas charakter architektoniczny i polega na przeredagowaniu kodu HTML, aby (M) odel mógł komunikować się z serwerem w razie potrzeby (zamiast przesyłania formularza przez użytkownika).

Jeśli strona HTML MVC nie jest zbyt wymagająca, aby rozwiązać dany problem: użyj tylko części dotyczącej generowania HTML komponentu iew AngularJS (V). W takim przypadku postępuj zgodnie z tym samym wzorem, który jest używany do generowania elementów takich jak <li />„s <ul />” i umieść powtórzenie ng na elemencie opcji:

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

Jako kludge zawsze można przenieść atrybut nazwy elementu select do ukrytego elementu wejściowego:

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

Możesz to zrobić:

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

-- AKTUALIZACJA

Po kilku aktualizacjach rozwiązanie frm.adiputra użytkownika jest znacznie lepsze. Kod:

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

Dziś zmagam się z tym problemem. Przeczytałem dokumentację AngularJS, to i inne posty oraz kilka blogów, do których prowadzą. Wszystkie pomogły mi uchwycić najdrobniejsze szczegóły, ale ostatecznie wydaje się to dość mylące. Głównie z powodu wielu niuansów składniowych ng-options.

W końcu dla mnie sprowadza się to do mniej znaczy więcej.

Biorąc pod uwagę zakres skonfigurowany w następujący sposób:

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

To wszystko, czego potrzebowałem, aby uzyskać pożądany wynik:

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

Zauważ, że nie korzystałem track by. Użycie track bywybranego elementu zawsze zwróciłoby obiekt pasujący do FirmnessID, a nie do samego FirmnessID. To teraz spełnia moje kryteria, to znaczy, że powinien zwrócić wartość liczbową zamiast obiektu i użyćng-options celu uzyskania poprawy wydajności, nie tworzy nowego zakresu dla każdej generowanej opcji.

Potrzebowałem też pustego pierwszego wiersza, więc po prostu dodałem znak <option>do<select> elementu.

Oto Plunkr, który pokazuje moją pracę.

Zamiast korzystać z nowej funkcji „śledź według”, możesz po prostu zrobić to z tablicą, jeśli chcesz, aby wartości były takie same jak w tekście:

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

Zwróć uwagę na różnicę między standardową składnią, która sprawi, że wartości staną się kluczami Object / Array, a zatem 0,1,2 itd. Dla tablicy:

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

k jak v staje się v jak v .

Odkryłem to w oparciu o zdrowy rozsądek, patrząc na składnię. (k, v) to rzeczywista instrukcja, która dzieli tablicę / obiekt na pary klucz-wartość.

W instrukcji „k as v” k będzie wartością, a v będzie opcją tekstową wyświetlaną użytkownikowi. Myślę, że „śledzenie” jest bałaganiarskie i przesadzone.

Według mnie najlepiej to pasowało do wszystkich scenariuszy:

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

gdzie możesz użyć swojego modelu do powiązania danych. Otrzymasz wartość, jak obiekt będzie zawierać, i domyślny wybór na podstawie twojego scenariusza.

Tak to rozwiązałem. Śledziłem zaznaczenie według wartości i ustawiłem właściwość wybranego elementu na model w moim kodzie 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">

vmjest moim kontrolerem, a krajem w kontrolerze pobranym z usługi jest {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Kiedy wybrałem inny kraj z menu rozwijanego Wybierz i opublikowałem swoją stronę za pomocą opcji „Zapisz”, zostałem przypisany do właściwego kraju.

ng-optionsDyrektywa nie określa atrybut wartość na<options> elementy dla tablic:

Za limit.value as limit.text for limit in limitspomocą oznacza:

ustaw <option>etykietę jako limit.text
zapisz limit.valuewartość w polu wyborung-model

Zobacz pytanie Przepełnienie stosu AngularJS ng-opcje nie wyświetla wartości .

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

Możesz użyć opcji ng, aby uzyskać powiązanie znacznika wyboru z wartościami i elementami wyświetlanymi

Podczas korzystania z tego źródła danych

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

możesz użyć poniżej, aby powiązać swój tag select z wartością i nazwą

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

działa świetnie

Prawidłowa odpowiedź na to pytanie została udzielona przez użytkownika frm.adiputra , ponieważ obecnie wydaje się, że jest to jedyny sposób, aby jawnie kontrolować atrybut wartości elementów opcji.

Chciałem jednak tylko podkreślić, że słowo „select” nie jest słowem kluczowym w tym kontekście, ale jest jedynie symbolem zastępczym wyrażenia. Poniższa lista zawiera definicję wyrażenia „select”, a także inne wyrażenia, których można użyć w dyrektywie ng-options.

Zastosowanie select, jak pokazano w pytaniu:

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

jest zasadniczo błędny.

Na podstawie listy wyrażeń wydaje się, że trackexpr może być użyty do określenia wartości, gdy opcje są podane w tablicy obiektów, ale był używany tylko z grupowaniem.

Z dokumentacji AngularJS dla opcji ng:

• tablica / obiekt : wyrażenie, które przekształca się w tablicę / obiekt do iteracji.
• wartość : zmienna lokalna, która będzie odnosić się do każdego elementu w tablicy lub każdej wartości właściwości obiektu podczas iteracji.
• key : zmienna lokalna, która będzie odwoływała się do nazwy właściwości w obiekcie podczas iteracji.
• etykieta : Wynikiem tego wyrażenia będzie etykieta elementu. Wyrażenie najprawdopodobniej będzie odnosić się do zmiennej wartości (np. Value.propertyName).
• select : wynik tego wyrażenia zostanie powiązany z modelem elementu nadrzędnego. Jeśli nie zostanie określony, wybierz wyrażenie domyślnie ma wartość.
• grupa : wynik tego wyrażenia zostanie użyty do grupowania opcji za pomocą elementu DOM.
• trackexpr : Używany podczas pracy z tablicą obiektów. Wynik tego wyrażenia zostanie użyty do identyfikacji obiektów w tablicy. Trackexpr najprawdopodobniej będzie odwoływał się do zmiennej wartości (np. Value.propertyName).

Wybór elementu w opcjach ng może być nieco trudny w zależności od ustawienia źródła danych.

Po dłuższej walce z nimi skończyłem na próbce z najczęściej używanymi źródłami danych. Możesz go znaleźć tutaj:

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

Teraz, aby opcje ng działały, oto kilka rzeczy do rozważenia:

1. Zwykle dostajesz opcje z jednego źródła i wybraną wartość z drugiego. Na przykład:
   • stwierdza :: dane dla opcji ng
   • user.state :: Opcja ustawienia jako wybrana
2. W oparciu o 1, najłatwiejszym / logicznym rozwiązaniem jest wypełnienie zaznaczenia jednym źródłem, a następnie ustawienie kodu minimalnego wybranej wartości. Rzadko lepiej byłoby uzyskać mieszany zestaw danych.
3. AngularJS pozwala wybranym kontrolkom pomieścić więcej niż key | label. Wiele przykładów online umieszcza obiekty jako „klucz”, a jeśli potrzebujesz informacji z obiektu, ustaw je w ten sposób, w przeciwnym razie użyj określonej właściwości, której potrzebujesz jako klucza. (ID, KOD, itp. Jak w próbce plckr)

4. Sposób ustawienia wartości kontrolki rozwijanej / wyboru zależy od nr 3,

   • Jeśli klucz rozwijany jest pojedynczą właściwością (jak we wszystkich przykładach w plunkr), wystarczy go ustawić, np .: $scope.dropdownmodel = $scope.user.state;

   • Jeśli ustawisz obiekt jako klucz, musisz przejść przez opcje, nawet przypisanie obiektu nie spowoduje ustawienia elementu jako wybranego, ponieważ będą one miały różne skróty, np .:

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

Można zastąpić savedValue dla tej samej nieruchomości w innym obiekcie $scope.myObject.myProperty.

Dla mnie odpowiedź Bruno Gomesa jest najlepszą odpowiedzią.

Ale tak naprawdę nie musisz się martwić o ustawienie właściwości wartości wybranych opcji. AngularJS zajmie się tym. Pozwól mi wyjaśnić szczegółowo.

Proszę wziąć pod uwagę to skrzypce

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

Jak widać w skrzypcach, niezależnie od tego, co wybierzesz dla opcji wyboru pola, jest to twoja wartość niestandardowa lub automatycznie generowana wartość 0, 1, 2 przez AngularJS, nie ma to znaczenia w twoim wyniku, chyba że używasz jQuery lub dowolnego inną bibliotekę, aby uzyskać dostęp do wartości wybranych opcji pola kombi i odpowiednio nim manipulować.

Rok po pytaniu musiałem znaleźć odpowiedź na to pytanie, ponieważ żadne z nich nie dało rzeczywistej odpowiedzi, przynajmniej mi.

Pytałeś, jak wybrać opcję, ale nikt nie powiedział, że te dwie rzeczy NIE są takie same:

Jeśli mamy takie opcje:

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

Próbujemy ustawić domyślną opcję taką jak ta:

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

To nie działa, ale jeśli spróbujesz wybrać opcję jak poniżej:

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

Będzie PRACY .

Mimo że te dwa obiekty mają te same właściwości, AngularJS uważa je za RÓŻNE, ponieważ AngularJS porównuje przez odniesienie .

Spójrz na skrzypce http://jsfiddle.net/qWzTb/ .

Użyj śledzenia według właściwości, które różnicują wartości i etykiety w polu wyboru.

Proszę spróbować

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

który przypisze etykiety z tekstem i wartością z wartością (z tablicy)

Dla obiektu:

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

Zawsze jest bolesne dla deweloperów korzystanie z opcji ng. Na przykład: Uzyskiwanie pustej / pustej wybranej wartości w tagu select. Zwłaszcza w przypadku obiektów JSON w opcjach ng staje się bardziej nużący. Tutaj zrobiłem kilka ćwiczeń na ten temat.

Cel: Iteruj tablicę obiektów JSON poprzez opcję ng i ustaw wybrany pierwszy element.

Dane:

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

W tagu select musiałem pokazać xyz i abc, gdzie xyz należy wybrać bez większego wysiłku.

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>

Przez powyższy przykład kodu możesz wyjść z tej przesady.

Kolejne odniesienie :

Samouczek ANGULAR.JS: NG-SELECT I NG-OPTIONS pomógł mi rozwiązać problem:

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

Uruchom fragment kodu i zobacz odmiany. Oto uwaga dla szybkiego zrozumienia

1. Przykład 1 (wybór obiektu): - ng-option="os.name for os in osList track by os.id". Tutaj track by os.idjest ważna i powinna być tam i os.id as nie powinny mieć przed os.name.

   • ng-model="my_os"Należy ustawić na obiekt z kluczem jako id podobnego my_os={id: 2}.

2. Przykład 2 (wybór wartości): - ng-option="os.id as os.name for os in osList". Tutaj track by os.id NIE powinno tam być i os.id as powinno być tam wcześniej os.name.

   • ng-model="my_os"Należy ustawić na wartość podobnegomy_os= 2

Fragment kodu odpoczynku wyjaśni.

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>

Jak wielu powiedziało wcześniej, jeśli mam dane coś takiego:

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

Użyłbym tego w następujący sposób:

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

W kontrolerze musisz ustawić wartość początkową, aby pozbyć się pierwszego pustego elementu:

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

Oto jak rozwiązuję ten problem w starszej aplikacji:

W HTML:

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

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

Mój HTML wyświetla poprawnie wartość opcji.

Dyrektywa ngOptions:

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

• Przypadek 1) etykieta wartości w tablicy:

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

Objaśnienie danych wyjściowych (Załóżmy, że wybrano pierwszy element):

selectedItem = {nazwa: „a”, wiek: 20} // [domyślnie wybrany element jest równy wartościowemu elementowi ]

selectedItem.age = 20

• Przypadek 2) wybierz jako etykietę wartości w tablicy:

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

Dane wyjściowe Objaśnienie (Załóżmy, że wybrano pierwszy element): selectedItem = 20 // [wybierz część to item.age ]