İşte bir sürü insanı (ben dahil) rahatsız eden şey.

ng-optionsAngularJS yönergesini kullanırken,<select> etiketi bir seçeneğin değerinin nasıl ayarlanacağını anlayamıyorum. Bunun için dokümantasyon gerçekten belirsiz - en azından benim gibi bir simpleton için.

Kolayca böyle bir seçenek için metin ayarlayabilirsiniz:

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

resultOptionsÖrneğin ne zaman :

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

Seçenek değerlerini ayarlamak için en basit şey olmalı (ve muhtemelen), ama şimdiye kadar anlamıyorum.

Bkz ngOptions

ngOptions (isteğe bağlı) - { comprehension_expression=} - aşağıdaki formlardan birinde:

Dizi veri kaynakları için : 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 Nesne veri kaynakları için: 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

Sizin durumunuzda,

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

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

Güncelleme

AngularJS'deki güncellemelerle, artık ifadeyle öğenin valueniteliği için gerçek değeri ayarlamak mümkündür .selecttrack by

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

Bu çirkin şeyleri hatırlamak nasıl

Bu sözdizimi formunu hatırlamakta zorlanan herkes için: Bunun en kolay veya en güzel sözdizimi olmadığını kabul ediyorum. Bu sözdizimi, Python'un söz dizimini çok kolay hatırlamama yardımcı olan liste kavrayışlarının ve bilgisinin genişletilmiş bir versiyonudur. Bunun gibi bir şey:

Python kodu:

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

Bu aslında yukarıda listelenen ilk sözdizimiyle aynı sözdizimidir. Ancak, <select>genellikle koddaki gerçek değer ile bir <select>öğede gösterilen metin (etiket) arasında ayrım yapmamız gerekir .

Kodda ihtiyacımız var person.idama idkullanıcıya göstermek istemiyoruz ; adını göstermek istiyoruz. Aynı şekilde, person.namekodla ilgilenmiyoruz . Bir asşeyleri etiketlemek için anahtar kelime gelir . Böylece şöyle olur:

person.id as person.name for person in people

Ya da bunun yerine örneğe / referansa person.idihtiyacımız olabilir person. Aşağıya bakınız:

person as person.name for person in people

JavaScript nesneleri için de aynı yöntem geçerlidir. Nesnedeki öğelerin (key, value)çiftlerle yapısız olduğunu unutmayın .

Değer öznitelikleri değerini nasıl alır:

• Bir diziyi veri kaynağı olarak kullanırken, her yinelemede dizi öğesinin dizini olacaktır;
• Bir nesneyi veri kaynağı olarak kullanırken, her yinelemede özellik adı olacaktır.

Yani sizin durumunuzda:

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

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

Ben de bu sorunu yaşadım. Ng-seçeneklerinde değerimi ayarlayamadım. Oluşturulan her seçenek 0, 1, ..., n ile ayarlandı.

Doğru yapmak için, ng seçeneklerimde böyle bir şey yaptım:

HTML:

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

Tüm değerlerimi ayarlamak için "takip etme" işlevini kullanıyorum room.price .

(Bu örnek berbat: çünkü birden fazla fiyat eşit olsaydı, kod başarısız olur. Bu yüzden farklı değerlere sahip olduğunuzdan emin olun.)

JSON:

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

Bunu blog yazısından öğrendim Angular.JS ng-options & track by kullanarak bir seçme öğesinin ilk seçilen değeri nasıl ayarlanır .

Videoyu izle. Güzel bir sınıf :)

optionForm sonunda bunu yapmak yerine sunucuya gönderileceğinden öğelerinizin değerini değiştirmek istiyorsanız ,

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

Bunu yapabilirsiniz:

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

Beklenen değer daha sonra doğru adla form aracılığıyla gönderilir.

my_heroNormal bir form kullanarak sunucuya çağrılan özel bir değer göndermek için:

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

Sunucu şunlardan birini ironveya superdeğerini alır:my_hero .

Bu @neemzy'nin cevabına benzer , ancak valueözellik için ayrı veriler belirtir .

Kullanımı ng-optionskarmaşık (muhtemelen sinir bozucu) görünüyor , ancak gerçekte bir mimari problemimiz var.

AngularJS, dinamik bir HTML + JavaScript uygulaması için bir MVC çerçevesi görevi görür. (V) iew bileşeni HTML "şablonlama" sunarken, asıl amacı bir denetleyici aracılığıyla kullanıcı eylemlerini modeldeki değişikliklere bağlamaktır. Bu nedenle , AngularJS'de çalışılacak uygun soyutlama düzeyi, bir seçim öğesinin modeldeki bir değeri sorgudan bir değere ayarlamasıdır .

• Bir sorgu satırı kullanıcıya nasıl sunulur (V) iew endişe ve seçenek öğesinin içeriği ne olması gerektiğini dikte etmek ng-optionsiçin foranahtar kelime sağlar yani p.text for p in resultOptions .
• Seçilen bir satırın sunucuya nasıl sunulduğu (M) odel'in endişesidir. Bu nedenle , modele olduğu gibi hangi değerin sağlandığını belirtmek ng-optionsiçin asanahtar kelimeyi sağlar k as v for (k,v) in objects.

Bu sorunun doğru çözümü o zaman mimari olarak doğar ve (M) odel gerektiğinde sunucu iletişimini gerçekleştirmek için HTML'nizi yeniden düzenlemeyi içerir (bir form gönderen kullanıcı yerine .

Bir MVC HTML sayfası eldeki sorun için fazla mühendislik gerektirmiyorsa: AngularJS (V) iew bileşeninin yalnızca HTML oluşturma bölümünü kullanın. Bu durumda, <li />'s under <ul />' gibi öğeler oluşturmak için kullanılanla aynı modeli izleyin ve bir seçenek öğesine ng tekrarlayın:

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

Gibi kludge , hep bir gizli giriş öğesine seçme elemanının adı niteliğini taşıyabilirsiniz:

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

Bunu yapabilirsiniz:

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

-- GÜNCELLEME

Bazı güncellemelerden sonra, kullanıcı frm.adiputra'nın çözümü çok daha iyidir. Kod:

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

Bugün bir süredir bu sorunla mücadele ettim. AngularJS belgelerini, bu ve diğer yayınları ve yönlendirdikleri birkaç blogu okudum. Hepsi daha ince ayrıntıları öğrenmeme yardımcı oldu, ama sonunda bu kafa karıştırıcı bir konu gibi görünüyor. Temelde birçok sözdizimsel nüansları nedeniyle ng-options.

Sonunda, benim için, daha az oldu daha fazla.

Aşağıdaki gibi yapılandırılmış bir kapsam verilir:

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

İstediğim sonucu elde etmek için ihtiyacım olan tek şey bu:

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

Ben kullanmadım dikkat edin track by. track bySeçilen öğenin kullanılması , her zaman FirmnessID'nin kendisi yerine FirmnessID ile eşleşen nesneyi döndürür. Bu, şimdi kriterlerimi karşılıyor, yani nesne yerine sayısal bir değer döndürmeli ve ng-optionsüretilen her seçenek için yeni bir kapsam oluşturmayarak sağladığı performans iyileştirmesini elde etmek için kullanmalıdır .

Sadece bir katma böylece Ayrıca, ben, İlk satırı boş ihtiyaç <option>için <select>eleman.

İşte çalışmamı gösteren bir Plunkr .

Yeni 'takip etme' özelliğini kullanmak yerine, değerlerin metinle aynı olmasını istiyorsanız bunu bir dizi ile yapabilirsiniz:

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

Değerleri Nesne / Dizinin anahtarları ve dolayısıyla bir dizi için 0,1,2 vb. Yapacak standart sözdizimi arasındaki farka dikkat edin:

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

v olarak k olur v olarak v .

Bunu sadece sözdizimine bakarak sağduyuya dayanarak keşfettim. (k, v) diziyi / nesneyi anahtar / değer çiftlerine ayıran gerçek ifadedir.

'K as v' deyiminde, k değer olacaktır ve v, kullanıcıya görüntülenen metin seçeneği olacaktır. Bence 'takip etme' dağınık ve aşırı.

Bu bana göre tüm senaryolar için en uygun olanıydı:

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

Burada verileri bağlamak için modelinizi kullanabilirsiniz. Nesneyi içerecek şekilde değeri ve senaryonuza göre varsayılan seçimi alırsınız.

Bunu bu şekilde çözdüm. Select by value'ı izledim ve seçilen item özelliğini JavaScript kodumdaki modele ayarladım.

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

vmbenim denetleyicim ve hizmetten alınan denetleyicideki Ülke {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Seç açılır listeden başka bir ülke seçtiğimde ve sayfamı "Kaydet" ile paylaştığımda, doğru ülkeyi bağladım.

ng-optionsYönerge üzerindeki değer ataması gelmez <options>diziler için elemanlar:

Kullanma limit.value as limit.text for limit in limitsaraçları:

set <option>olarak bireyin etiketini limit.text
kaydet limit.valueseçeneğini Kullanıcı içine değering-model

Bkz. Yığın Taşması sorusu AngularJS ng seçenekleri değerleri oluşturmuyor .

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

Değer ve görüntüleme üyelerine seçme etiketi bağlaması elde etmek için ng seçeneklerini kullanabilirsiniz

Bu veri kaynağını kullanırken

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

seçim etiketinizi değere ve ada bağlamak için aşağıdakileri kullanabilirsiniz

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

harika çalışıyor

Bu soruya doğru cevap frm.adiputra kullanıcısı tarafından sağlanmıştır , çünkü şu anda bu seçenek öğelerinin değer niteliğini açıkça kontrol etmenin tek yolu gibi görünmektedir.

Ancak, sadece "select" in bu bağlamda bir anahtar kelime olmadığını, ancak sadece bir ifade için bir yer tutucu olduğunu vurgulamak istedim. "Select" ifadesinin tanımı ve ng-options yönergesinde kullanılabilecek diğer ifadeler için lütfen aşağıdaki listeye bakın.

Seçimin soruda gösterildiği gibi kullanımı:

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

aslında yanlış.

İfadeler listesine dayanarak, bir nesne dizisinde seçenekler verildiğinde trackexpr'in değeri belirtmek için kullanılabileceği görülüyor , ancak yalnızca gruplandırma ile kullanıldı.

AngularJS'nin ng seçenekleri ile ilgili belgelerinden:

• dizi / nesne : üzerinde yinelenecek bir dizi / nesne olarak değerlendirilen bir ifade.
• value : dizideki her öğeye veya yineleme sırasında nesnenin her özellik değerine atıfta bulunacak yerel değişken.
• key : yineleme sırasında nesnede bir özellik adına atıfta bulunacak yerel değişken.
• label : Bu ifadenin sonucu, elementin etiketi olacaktır. İfade büyük olasılıkla değer değişkenine (ör. Value.propertyName) atıfta bulunur.
• select : Bu ifadenin sonucu üst öğenin modeline bağlı olacaktır. Belirtilmezse, select ifadesi varsayılan olarak değer verir.
• group : Bu ifadenin sonucu, DOM öğesini kullanarak seçenekleri gruplandırmak için kullanılır.
• trackexpr : Bir nesne dizisiyle çalışırken kullanılır. Bu ifadenin sonucu, dizideki nesneleri tanımlamak için kullanılır. Trackexpr büyük olasılıkla değer değişkenine (ör. Value.propertyName) atıfta bulunur.

Veri seçeneklerinde bir öğe seçmek, veri kaynağını nasıl ayarladığınıza bağlı olarak biraz zor olabilir.

Bir süre onlarla mücadele ettikten sonra kullandığım en yaygın veri kaynaklarından bir örnek oluşturdum. Burada bulabilirsiniz:

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

Şimdi ng-seçeneklerini çalıştırmak için göz önünde bulundurmanız gereken bazı noktalar:

1. Normalde seçenekleri bir kaynaktan ve seçilen değeri diğerinden alırsınız. Örneğin:
   • states :: ng-options verileri
   • user.state :: Seçili olarak ayarlama seçeneği
2. 1'e dayanarak, yapılacak en kolay / mantıklı şey, seçimi bir kaynakla doldurmak ve sonra seçilen değer çukur kodunu ayarlamaktır. Karışık bir veri kümesi elde etmek nadiren daha iyi olur.
3. AngularJS, seçili kontrollerin key | label . Birçok çevrimiçi örnek, nesneleri 'anahtar' olarak ayarlar ve nesneden bu şekilde ayarlanan bilgilere ihtiyacınız varsa, aksi takdirde anahtar olarak ihtiyacınız olan belirli özelliği kullanın. (Kimlik, KOD, vb. Plckr örneğinde olduğu gibi)

4. Açılır / seçili denetimin değerini ayarlama yöntemi # 3,

   • Açılır anahtar tek bir özellikse (plunkr'deki tüm örneklerde olduğu gibi), onu ayarlamanız gerekir, örneğin: $scope.dropdownmodel = $scope.user.state;

   • Nesneyi anahtar olarak ayarlarsanız, seçenekler arasında döngü yapmalısınız, nesneyi atamak bile öğeyi farklı hashkey'lerine sahip olacağı için seçili olarak ayarlamaz, örneğin:

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

Aynı özellik için saveValue öğesini diğer nesnede değiştirebilirsiniz $scope.myObject.myProperty.

Benim için Bruno Gomes tarafından cevap cevabı en iyi cevap.

Ancak aslında, seçme seçeneklerinin value özelliğini ayarlama konusunda endişelenmenize gerek yoktur. AngularJS bununla ilgilenecek. Açıklayayım.

Lütfen bu kemanı düşünün

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

Keman çıktısında görebileceğiniz gibi, seçim kutusu seçenekleri için ne seçerseniz seçin, özel değeriniz veya AngularJS tarafından otomatik olarak oluşturulan 0, 1, 2 değeridir, jQuery veya herhangi birini kullanmadığınız sürece çıktınızda önemli değildir. diğer kütüphane, bu birleşik giriş kutusu seçeneklerinin değerine erişmek ve buna göre işlemek için kullanılır.

Sorudan bir yıl sonra, bu soruya bir cevap bulmak zorunda kaldım, çünkü bunların hiçbiri en azından bana gerçek cevabı verdi.

Seçeneği nasıl seçeceğinizi sordunuz, ancak kimse bu iki şeyin DEĞİL olduğunu söylemedi aynı:

Böyle bir seçeneğimiz varsa:

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

Ve böyle bir varsayılan seçenek ayarlamaya çalışıyoruz:

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

Bu olacak DEĞİL böyle seçeneği çalışırsanız çalışır, ancak:

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

O edecektir İŞ .

Bu iki nesne aynı özelliklere sahip olsa da, AngularJS bunları FARKLI olarak değerlendirir çünkü AngularJS referansla karşılaştırır .

Keman http://jsfiddle.net/qWzTb/ bir göz atın .

Lütfen seçim kutusundaki değerleri ve etiketleri ayıran track by özelliğini kullanın.

Deneyin lütfen

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

(diziden) metin ve değere sahip etiketleri atayacak (diziden)

Bir nesne için:

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

Geliştiricilerin ng seçenekleri ile her zaman acı vericidir. Örneğin: Seçim etiketinde seçili boş / boş bir değer elde etme. Özellikle ng-opsiyonlarındaki JSON nesneleri ile uğraşırken, daha sıkıcı hale gelir. Burada bazı alıştırmalar yaptım.

Amaç: JSON nesneleri dizisini ng-option ile yineleyin ve seçilen ilk öğeyi ayarlayın.

Veri:

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

Seçim etiketinde xyz ve abc'yi göstermek zorunda kaldım, burada xyz fazla çaba sarf edilmeden seçilmelidir.

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>

Yukarıdaki kod örneği ile, bu abartı alabilirsiniz.

Başka bir referans :

ANGULAR.JS: NG-SELECT VE NG-OPTIONS öğreticisi sorunu çözmeme yardımcı oldu:

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

Kod snippet'ini çalıştırın ve varyasyonları görün. İşte hızlı anlama için not

1. Örnek 1 (Nesne seçimi): - ng-option="os.name for os in osList track by os.id". İşte track by os.idönemlidir ve olması gerektiği orada ve os.id as olmaMAlıdır önce var os.name.

   • ng-model="my_os"Olarak anahtarla bir nesneye belirlesin id gibi my_os={id: 2}.

2. Örnek 2 (Değer seçimi): - ng-option="os.id as os.name for os in osList". Burada track by os.id olmamalı ve os.id as daha önce orada olmalıos.name .

   • ng-model="my_os"Gibi bir değere ayarlamanız gerekirmy_os= 2

Dinlenme kodu snippet'i açıklayacaktır.

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>

Daha önce de söylediğim gibi, eğer böyle bir veri varsa:

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

Ben şöyle kullanırdım:

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

Denetleyicinizde, ilk boş öğeden kurtulmak için bir başlangıç ​​değeri ayarlamanız gerekir:

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

Eski bir uygulamada bu sorunu nasıl çözeceğim:

HTML'de:

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

JavaScript'te:

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

HTML'im seçenek değerini düzgün bir şekilde gösteriyor.

ngOptions yönergesi:

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

• Durum-1) dizideki değer için etiket:

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

Çıktı Açıklaması (Birinci öğenin seçildiğini varsayın):

selectedItem = {ad: 'a', yaş: 20} // [varsayılan olarak, seçilen öğe değer öğesine eşittir ]

selectedItem.age = 20

• Durum-2) dizideki değer için etiket olarak seçin:

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

Çıktı Açıklaması (1. öğenin seçildiğini varsayın): selectedItem = 20 // [parçayı seçin item.age ]