Inilah yang tampaknya mengganggu banyak orang (termasuk saya).

Saat menggunakan ng-optionsarahan dalam AngularJS untuk mengisi opsi untuk sebuah <select>tag, saya tidak tahu cara mengatur nilai untuk suatu opsi. Dokumentasi untuk ini benar-benar tidak jelas - setidaknya untuk orang bodoh seperti saya.

Saya dapat mengatur teks untuk opsi dengan mudah seperti ini:

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

Kapan resultOptionsmisalnya:

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

Seharusnya (dan mungkin) hal yang paling sederhana untuk mengatur nilai opsi, tapi sejauh ini saya tidak mengerti.

Lihat Pilihan

ngOptions (opsional) - { comprehension_expression=} - di salah satu formulir berikut:

Untuk sumber data larik : 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 Untuk sumber data objek: 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

Dalam kasus Anda, seharusnya begitu

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

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

Memperbarui

Dengan pembaruan di AngularJS, sekarang dimungkinkan untuk menetapkan nilai aktual untuk valueatribut selectelemen dengan track byekspresi.

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

Bagaimana cara mengingat hal-hal buruk ini

Untuk semua orang yang mengalami kesulitan untuk mengingat bentuk sintaksis ini: Saya setuju ini bukan sintaksis yang paling mudah atau indah. Sintaks ini adalah jenis versi lanjutan dari pemahaman daftar Python dan pengetahuan yang membantu saya mengingat sintaks dengan sangat mudah. Ini sesuatu seperti ini:

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

Ini sebenarnya sintaks yang sama dengan yang pertama di atas. Namun, dalam <select>kita biasanya perlu membedakan antara nilai aktual dalam kode dan teks yang ditampilkan (label) dalam suatu <select>elemen.

Seperti, kita perlu person.iddalam kode, tetapi kami tidak ingin menunjukkan idkepada pengguna; kami ingin menunjukkan namanya. Demikian juga, kami tidak tertarik pada person.namekode. Ada askata kunci untuk memberi label barang. Jadi menjadi seperti ini:

person.id as person.name for person in people

Atau, alih-alih person.idkita bisa membutuhkan personinstance / referensi itu sendiri. Lihat di bawah:

person as person.name for person in people

Untuk objek JavaScript, metode yang sama juga berlaku. Ingatlah bahwa item dalam objek didekonstruksi dengan (key, value)berpasangan.

Bagaimana atribut nilai mendapatkan nilainya:

• Saat menggunakan array sebagai sumber data, itu akan menjadi indeks elemen array di setiap iterasi;
• Saat menggunakan objek sebagai sumber data, itu akan menjadi nama properti di setiap iterasi.

Jadi dalam kasus Anda seharusnya:

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

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

Saya punya masalah ini juga. Saya tidak dapat menetapkan nilai saya di opsi-ng. Setiap opsi yang dihasilkan diatur dengan 0, 1, ..., n.

Untuk memperbaikinya, saya melakukan sesuatu seperti ini di opsi-ng saya:

HTML:

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

Saya menggunakan "track by" untuk mengatur semua nilai saya room.price.

(Contoh ini payah: karena jika ada lebih dari satu harga yang sama, kodenya akan gagal. Jadi PASTI memiliki nilai yang berbeda.)

JSON:

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

Saya mempelajarinya dari posting blog Cara mengatur nilai awal yang dipilih dari elemen pilih menggunakan Angular.JS ng-opsi & melacak dengan .

Tonton videonya. Kelas yang bagus :)

Jika Anda ingin mengubah nilai optionelemen Anda karena formulir pada akhirnya akan dikirimkan ke server, alih-alih melakukan ini,

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

Kamu bisa melakukan ini:

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

Nilai yang diharapkan kemudian akan dikirim melalui formulir dengan nama yang benar.

Untuk mengirim nilai khusus yang dipanggil my_heroke server menggunakan formulir normal, kirim:

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

Server akan menerima salah satu ironatau supersebagai nilai my_hero.

Ini mirip dengan jawaban oleh @neemzy , tetapi menentukan data terpisah untuk valueatribut.

Tampaknya ng-optionsrumit (mungkin membuat frustrasi) untuk digunakan, tetapi dalam kenyataannya kita memiliki masalah arsitektur.

AngularJS berfungsi sebagai kerangka kerja MVC untuk aplikasi HTML + JavaScript yang dinamis. Sementara komponen (V) baru memang menawarkan HTML "templating," tujuan utamanya adalah untuk menghubungkan tindakan pengguna, melalui pengontrol, dengan perubahan dalam model. Oleh karena itu tingkat abstraksi yang sesuai, yang digunakan untuk bekerja di AngularJS, adalah bahwa elemen pilih menetapkan nilai dalam model ke nilai dari kueri .

• Bagaimana baris kueri disajikan kepada pengguna adalah perhatian (V) iew dan ng-optionsmemberikan forkata kunci untuk menentukan apa isi dari elemen opsi yaitu p.text for p in resultOptions .
• Bagaimana baris yang dipilih disajikan ke server adalah masalah (M) odel. Oleh karena itu ng-optionsmemberikan askata kunci untuk menentukan apa nilai disediakan untuk model seperti dalam k as v for (k,v) in objects.

Solusi yang benar adalah masalah ini kemudian bersifat arsitektur dan melibatkan refactoring HTML Anda sehingga (M) odel melakukan komunikasi server bila diperlukan (alih-alih pengguna yang mengirimkan formulir).

Jika halaman HTML MVC tidak perlu melakukan rekayasa berlebihan untuk masalah yang dihadapi: maka gunakan hanya bagian generasi HTML dari komponen (V) AngularJS yang baru. Dalam hal ini, ikuti pola yang sama yang digunakan untuk menghasilkan elemen seperti <li />'s di bawah <ul />' dan menempatkan ng-repeat pada elemen opsi:

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

Sebagai kludge , kita selalu dapat memindahkan atribut nama elemen pilih ke elemen input tersembunyi:

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

Kamu bisa melakukan ini:

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

- PEMBARUAN

Setelah beberapa update, pengguna frm.adiputra 's solusi jauh lebih baik. Kode:

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

Saya telah berjuang dengan masalah ini untuk sementara waktu hari ini. Saya membaca dokumentasi AngularJS, ini dan posting lainnya dan beberapa blog yang mereka tuju. Mereka semua membantu saya mendapatkan detail yang lebih baik, tetapi pada akhirnya ini sepertinya menjadi topik yang membingungkan. Terutama karena banyaknya nuansa sintaksis dari ng-options.

Pada akhirnya, bagi saya, turun menjadi lebih sedikit.

Diberikan ruang lingkup yang dikonfigurasi sebagai berikut:

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

Ini yang saya butuhkan untuk mendapatkan hasil yang diinginkan:

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

Perhatikan saya tidak menggunakan track by. Menggunakan track byitem yang dipilih akan selalu mengembalikan objek yang cocok dengan FirmnessID, daripada FirmnessID itu sendiri. Ini sekarang memenuhi kriteria saya, yaitu harus mengembalikan nilai numerik daripada objek, dan digunakan ng-optionsuntuk mendapatkan peningkatan kinerja yang disediakannya dengan tidak membuat ruang lingkup baru untuk setiap opsi yang dihasilkan.

Juga, saya membutuhkan kosong baris pertama, jadi saya hanya menambahkan <option>ke <select>elemen.

Ini adalah Plunkr yang menunjukkan pekerjaan saya.

Alih-alih menggunakan fitur 'track by' yang baru, Anda cukup melakukan ini dengan sebuah array jika Anda ingin nilainya sama dengan teks:

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

Perhatikan perbedaan antara sintaks standar, yang akan membuat nilai-nilai kunci dari Obyek / Array, dan karenanya 0,1,2 dll untuk sebuah array:

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

k as v menjadi v as v .

Saya menemukan ini hanya berdasarkan akal sehat melihat sintaks. (k, v) adalah pernyataan aktual yang membagi array / objek menjadi pasangan nilai kunci.

Dalam pernyataan 'k as v', k akan menjadi nilainya, dan v akan menjadi opsi teks yang ditampilkan kepada pengguna. Saya pikir 'track by' berantakan dan berlebihan.

Ini paling cocok untuk semua skenario menurut saya:

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

di mana Anda dapat menggunakan model Anda untuk mengikat data. Anda akan mendapatkan nilai karena objek akan berisi dan pemilihan default berdasarkan skenario Anda.

Ini adalah bagaimana saya menyelesaikan ini. Saya melacak pilih berdasarkan nilai dan mengatur properti item yang dipilih ke model dalam kode JavaScript saya.

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

vmadalah controller saya dan Negara di controller diambil dari layanan ini {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Ketika saya memilih negara lain dari dropdown yang dipilih dan memposting halaman saya dengan "Simpan", saya mendapatkan negara yang benar terikat.

The ng-optionsdirektif tidak menetapkan atribut nilai pada <options>elemen untuk array:

Menggunakan limit.value as limit.text for limit in limitscara:

atur <option>label sebagai limit.text
simpan limit.valuenilainya ke dalam pilihng-model

Lihat pertanyaan Stack Overflow AngularJS-opsi tidak merender nilai .

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

Anda dapat menggunakan opsi-ng untuk mencapai ikatan tag terpilih dengan nilai dan menampilkan anggota

Saat menggunakan sumber data ini

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

Anda dapat menggunakan yang di bawah ini untuk mengikat tag pilih Anda dengan nilai dan nama

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

ini bekerja dengan baik

Jawaban yang benar untuk pertanyaan ini telah disediakan oleh pengguna frm.adiputra , karena saat ini tampaknya ini satu-satunya cara untuk secara eksplisit mengontrol atribut nilai dari elemen opsi.

Namun, saya hanya ingin menekankan bahwa "pilih" bukan kata kunci dalam konteks ini, tetapi hanya pengganti untuk ekspresi. Silakan merujuk ke daftar berikut, untuk definisi ekspresi "pilih" serta ekspresi lain yang dapat digunakan dalam arahan opsi-ng.

Penggunaan pilih seperti yang digambarkan dalam pertanyaan:

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

pada dasarnya salah.

Berdasarkan daftar ekspresi, sepertinya trackexpr dapat digunakan untuk menentukan nilai, ketika opsi diberikan dalam array objek, tetapi telah digunakan dengan pengelompokan saja.

Dari dokumentasi AngularJS untuk opsi-ng:

• array / objek : ekspresi yang mengevaluasi ke array / objek untuk diulangi.
• value : variabel lokal yang akan merujuk ke setiap item dalam array atau setiap nilai properti objek selama iterasi.
• kunci : variabel lokal yang akan merujuk ke nama properti di objek selama iterasi.
• label : Hasil dari ekspresi ini akan menjadi label untuk elemen. Ekspresi kemungkinan besar akan merujuk ke variabel nilai (misalnya value.propertyName).
• pilih : Hasil ekspresi ini akan terikat ke model elemen induk. Jika tidak ditentukan, ekspresi pilih akan default ke nilai.
• grup : Hasil dari ekspresi ini akan digunakan untuk mengelompokkan opsi menggunakan elemen DOM.
• trackexpr : Digunakan saat bekerja dengan berbagai objek. Hasil dari ekspresi ini akan digunakan untuk mengidentifikasi objek dalam array. Trackexpr kemungkinan besar akan merujuk ke variabel nilai (misalnya value.propertyName).

Memilih item dalam opsi-ng bisa agak rumit tergantung pada bagaimana Anda mengatur sumber data.

Setelah bergumul dengan mereka selama beberapa waktu, saya akhirnya membuat sampel dengan sumber data paling umum yang saya gunakan. Anda dapat menemukannya di sini:

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

Sekarang untuk membuat opsi-ng berfungsi, berikut adalah beberapa hal yang perlu dipertimbangkan:

1. Biasanya Anda mendapatkan opsi dari satu sumber dan nilai yang dipilih dari yang lain. Sebagai contoh:
   • menyatakan :: data untuk opsi-ng
   • user.state :: Opsi untuk ditetapkan sebagai yang dipilih
2. Berdasarkan pada 1, hal yang paling mudah / logis untuk dilakukan adalah mengisi pilih dengan satu sumber dan kemudian mengatur nilai yang dipilih melalui kode. Jarang akan lebih baik untuk mendapatkan dataset campuran.
3. AngularJS memungkinkan kontrol pilih untuk menahan lebih dari key | label. Banyak contoh online menempatkan objek sebagai 'kunci', dan jika Anda memerlukan informasi dari objek atur seperti itu, gunakan properti spesifik yang Anda perlukan sebagai kunci. (ID, KODE, dll. Seperti dalam sampel Plckr)

4. Cara untuk mengatur nilai kontrol dropdown / pilih tergantung pada # 3,

   • Jika kunci dropdown adalah properti tunggal (seperti pada semua contoh di plunkr), Anda cukup menyetelnya, misalnya: $scope.dropdownmodel = $scope.user.state;

   • Jika Anda menetapkan objek sebagai kunci, Anda perlu mengulang melalui opsi, bahkan menetapkan objek tidak akan mengatur item yang dipilih karena mereka akan memiliki hashke berbeda, misalnya:

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

Anda dapat mengganti Nilai yang disimpan untuk properti yang sama di objek lain $scope.myObject.myProperty,.

Bagi saya jawabannya oleh Bruno Gomes adalah jawaban terbaik.

Namun sebenarnya, Anda tidak perlu khawatir tentang pengaturan properti nilai opsi terpilih. AngularJS akan membereskannya. Biarkan saya jelaskan secara mendetail.

Silakan pertimbangkan biola ini

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

Seperti yang dapat Anda lihat di output biola, apa pun yang Anda pilih untuk opsi kotak pilih, itu adalah nilai khusus Anda, atau nilai 0, 1, 2 yang dihasilkan secara otomatis oleh AngularJS, itu tidak masalah dalam output Anda kecuali jika Anda menggunakan jQuery atau perpustakaan lain untuk mengakses nilai opsi kotak kombo pilih itu dan memanipulasi sesuai.

Setahun setelah pertanyaan, saya harus menemukan jawaban untuk pertanyaan ini karena tidak ada yang memberikan jawaban yang sebenarnya, setidaknya kepada saya.

Anda telah bertanya bagaimana memilih opsi, tetapi tidak ada yang mengatakan bahwa kedua hal ini TIDAK sama:

Jika kami memiliki opsi seperti ini:

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

Dan kami mencoba untuk menetapkan opsi default seperti ini:

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

Ini TIDAK akan berhasil, tetapi jika Anda mencoba memilih opsi seperti ini:

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

Itu akan BEKERJA .

Meskipun kedua objek ini memiliki sifat yang sama, AngularJS menganggapnya sebagai BERBEDA karena AngularJS membandingkan dengan referensi .

Lihatlah biola http://jsfiddle.net/qWzTb/ .

Harap gunakan trek menurut properti yang membedakan nilai dan label dalam kotak pilih.

Silakan dicoba

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

yang akan menetapkan label dengan teks dan nilai dengan nilai (dari array)

Untuk objek:

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

Itu selalu menyakitkan bagi pengembang untuk ng-opsi. Misalnya: Mendapatkan nilai yang dipilih kosong / kosong di tag pilih. Terutama ketika berhadapan dengan objek JSON dalam opsi-ng, itu menjadi lebih membosankan. Di sini saya telah melakukan beberapa latihan tentang itu.

Tujuan: Iterate array objek JSON melalui ng-option dan atur elemen pertama yang dipilih.

Data:

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

Pada tag pilih saya harus menunjukkan xyz dan abc, di mana xyz harus dipilih tanpa banyak usaha.

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>

Dengan contoh kode di atas, Anda mungkin keluar dari berlebihan ini.

Referensi lain :

Tutorial ANGULAR.JS: NG-SELECT AND NG-OPTIONS membantu saya memecahkan masalah:

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

Jalankan cuplikan kode dan lihat variasinya. Ini catatan untuk pemahaman cepat

1. Contoh 1 (Pemilihan objek): - ng-option="os.name for os in osList track by os.id". Ini track by os.idpenting & harus ada dan os.id as TIDAK harus ada sebelumnya os.name.

   • The ng-model="my_os"harus diatur ke sebuah objek dengan kunci sebagai id seperti my_os={id: 2}.

2. Contoh 2 (Pemilihan nilai): - ng-option="os.id as os.name for os in osList". Di sini track by os.id BUKAN ada di sana dan os.id as harus ada di sana sebelumnya os.name.

   • The ng-model="my_os"harus set ke nilai sepertimy_os= 2

Cuplikan kode istirahat akan menjelaskan.

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>

Seperti banyak yang katakan sebelumnya, jika saya memiliki data seperti ini:

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

Saya akan menggunakannya seperti:

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

Di Controller Anda, Anda perlu menetapkan nilai awal untuk menyingkirkan item kosong pertama:

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

Inilah cara saya mengatasi masalah ini dalam aplikasi lawas:

Dalam HTML:

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

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

HTML saya menampilkan nilai opsi dengan benar.

Petunjuk ngOptions:

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

• Label-1) untuk nilai dalam 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>

Penjelasan Keluaran (Asumsikan item pertama dipilih):

selectedItem = {name: 'a', umur: 20} // [secara default, item yang dipilih sama dengan item nilai ]

selectedItem.age = 20

• Case-2) pilih sebagai label untuk nilai dalam 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>

Penjelasan Keluaran (Asumsikan item pertama dipilih): selectedItem = 20 // [pilih bagian adalah item.age ]