Bagaimana cara mengatur properti nilai dalam opsi ng AngularJS?


557

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.


12
Punya masalah yang sama karena saya tidak menemukan dokumen (seperti yang ditunjukkan di bawah) sangat jelas.
benvds

1
Penggunaan "pilih" seperti yang digambarkan dalam pertanyaan pada dasarnya salah, karena "pilih" dalam konteks ini, bukan kata kunci, tetapi merupakan tempat penampung ekspresi. Ini dari dokumentasi AngularJS: "select: Hasil ekspresi ini akan terikat pada model elemen induk. Jika tidak ditentukan, ekspresi pilih akan default ke nilai." Saya telah memberikan lebih detail dalam jawaban saya di bawah ini.
Majix

Bagi saya ini adalah jawaban terbaik. stackoverflow.com/questions/12139152/…
Sanjay

1
Catatan: Untuk opsi-ng untuk bekerja, model-ng adalah wajib !!!!!!!!! Ref: stackoverflow.com/a/13049740/234110
Anand Rockzz

Jawaban:


698

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.


33
Contoh Anda tidak mengisi atribut nilai opsi. Ini mendefinisikan apa yang akan disimpan dalam model elemen <select>. Lihat perbedaan antara obj.value sebagai obj.text dan obj.text
Artem Andreev

57
Aneh tapi saya mendapatkan <option value = "0"> 1st </option>, <option value = "1"> 2nd </option> di Chrome dan FF.
Artem Andreev

49
Ini bukan bug, ini fitur. angularjs menangani ngOptions dan ngModel internal, dengan cara ini Anda dapat menggunakan semua jenis objek sebagai nilai dalam opsi daripada hanya string. Anda tidak boleh mencoba untuk mendapatkan nilai pilih sebaliknya Anda hanya perlu menggunakan ngModel yang Anda lampirkan untuk memilih elemen.
Umur Kontacı

4
Saya mohon untuk berbeda. Secara internal arahan pilih dapat dengan mudah menggunakan model sendiri yang tidak terlihat untuk melacak opsi mana yang dipilih. Bahkan jika itu tidak melacak nilai model secara internal, itu setidaknya bisa membuat opsi dan hanya prepend dan pilih opsi kosong (yang merupakan perilaku yang dilakukannya sekarang jika Anda mengatur model ke nilai bukan dalam set pilihan) . Satu-satunya ketergantungan untuk menunjukkan opsi adalah opsi itu sendiri - Prinsip POLA berlaku di sini.
Yehezkiel Victor

3
Mengapa jawaban ini memiliki begitu banyak suara ketika tidak memberikan jawaban? Jawaban frm.adiputra benar.
Noishe

136

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>

15
+1 untuk menjelaskan bagaimana Angular menetapkan atribut nilai dari elemen opsi.
Mark Rajcok

1
Ini tidak menetapkan nilai. Nilai standar untuk angka. Tetapi Anda tidak dapat benar-benar menentukan "nilai" .. konyol ..
Perjalanan

13
@ Trip, jika Anda 'memeriksa' opsi yang dipilih, Anda akan melihat angka, tetapi jika Anda melihat nilai terikat dalam model, nilainya dalam hal ini adalah nilai 'k'. Ini membingungkan. blesh memiliki bungkusan yang menunjukkan ini dalam jawaban ini: stackoverflow.com/questions/13047923/… plnkr.co/edit/vJOljg?p=preview
TsenYing

4
Ini harus dimasukkan ke dalam dokumen bersudut, pendek dan tepat. +1
devric

2
Ini adalah satu-satunya solusi yang berhasil untuk saya. Sakit kepala yang tidak menyenangkan.
Jon

121

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


8
Ini bekerja dengan sempurna. Di atasnya, ia memungkinkan untuk menggunakan elemen datalist dengan <select> yang terkandung sehingga datalist dapat mereferensikan opsi melalui nilainya. @Bruno Gomes terima kasih
memanjat

3
ini adalah satu-satunya solusi yang berfungsi untuk saya. Terima kasih.
Niner

9
Ini adalah jawaban yang paling tepat untuk opsi-ng dengan nilai kotak opsi agar cocok dengan array / objek. Saya akan memberikan 10.000 poin bagi Anda untuk menghemat hari semua orang jika ada sistem pertukaran hadiah. Sintaks paling aneh dari tim sudut.
webblover

2
TERIMA KASIH! Ini sangat frustasi untuk waktu yang lama!
Sean Thompson

2
Saya berharap harga kamar tidak pernah sama, karena ini akan pecah.
nilskp

47

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.


2
Saya akan menambahkan itu, daripada menggunakan <input type="hidden" name="text" value="{{ text }}" />, saya akan menggunakan ng-value. Jadi: <input type="hidden" name="text" ng-value="{{ text }}" />.
Dan Atkinson

untuk mengklarifikasi dalam kasus saya, saya tidak mengirimkan formulir melalui Angular menggunakan posting json - melainkan saya mengirimkan formulir biasanya menggunakan posting http, jadi menimpa nilai yang dimasukkan Angular dalam tag <options> memungkinkan saya untuk mengirimkan yang benar nilai (terima kasih!). Saya tidak perlu menggunakan ng-value dalam input tersembunyi, melainkan saya perlu mengatur tag nilai sebagai catatan posting asli.
FireDragon

26

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.


24

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 &lt;li /&gt;'s di bawah &lt;ul /&gt;' 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}}” />

kinerja buruk ketika menggunakan ng-repeat pada elemen opsi, mungkin? Anda seharusnya menggunakan opsi-ng pada pilih itu sendiri.
DrCord

@DrCord: Menggunakan ng-repeat pada elemen opsi ditawarkan sebagai solusi hanya dalam kasus-kasus terisolasi (ketika halaman HTML MVC yang tepat tidak perlu rekayasa berlebihan). Mungkin downvoter tidak mempersiapkannya dengan sangat cermat. Ini akan diedit untuk memanggil lebih spesifik bahwa ng-repeat pada elemen opsi bukanlah kasus yang ideal.
Joshcodes

1
Sebagai N00b Angular saya akan memilih solusi ini karena pada contoh pertama sepertinya saran yang adil dan cenderung bekerja. Sintaks yang disarankan dalam jawaban lain adalah, paling tidak, aneh - bahkan jika salah satu dari banyak pilihan berhasil. Ini adalah solusi yang sah dan jika itu menghindari optimasi prematur maka tidak apa-apa. Down voting hanya berarti sepertinya.
Ian Lewis

2
Inilah yang dikatakan di situs web AngularJS: docs.angularjs.org/api/ng/directive/select . "Note: ngOptions provides an iterator facility for the <option> element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.". Tidak disebutkan kinerja, hanya bahwa ngOptions adalah alternatif untuk ngRepeat.
Ian Lewis

@IanLewis, terima kasih, itu masuk akal. Tidak masuk akal bagi saya mengapa ngRepeat akan menjadi kurang performan pada opsi pilih yang tidak terikat daripada pada tag <li>.
Joshcodes

20

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>

8
Lebih baik menggunakan opsi-ng di dalam elemen / arahan pilih. Misalnya, <pilih ng-model = "model" ng-options = "obj.id sebagai obj.name untuk obj in array">. Apa yang Anda punya bekerja, tetapi itu tidak akan bekerja dengan konstruksi sudut lainnya. Misalnya, ng-klik ini tidak akan berfungsi dengan kode Anda: <a ng-click="model=1"> pilih 1 </a>, tetapi itu berfungsi jika ng-opsi digunakan.
Mark Rajcok

Saya baru saja muncul bug aneh karena melakukannya dengan cara ini. Banyak pencarian yang menyakitkan membawa saya ke penemuan opsi-ng, dan bug itu hilang. Model-ng tampaknya mensyaratkan bahwa atribut nilai dari opsi adalah numerik dan naik dari 0. Jika Anda mengubah nilai menjadi indeks non numerik dengan menggunakan tag ng-repeat dan <option>, maka perubahan dalam model tidak selalu tercermin dalam kotak pilih.
Noishe

14

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.


Legenda. Inilah yang saya butuhkan. Terima kasih
Kildareflare

Bagus, tapi apa tujuan dari kunci "Nilai"? Mereka sepertinya tidak perlu.
mhenry1384

Tidak relevan dengan contoh. Mereka hanyalah bagian dari data asli yang diberikan kepada saya oleh klien saya.
Jeffrey A. Gochin

11

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.


Waaaaat? Berfungsi untuk array di semua tempat pada halaman saya, apakah kita menggunakan versi AngularJS yang sama?
KthProg

11

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.


Cintai solusi ini. Pembantu sudut mereka untuk arahan ini tidak perlu rumit. Terima kasih telah menjadi hakim penggunaan yang diproklamirkan sendiri.
David Melin

9

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.


8

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 .



4

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


1
Harap tambahkan jawaban khusus kode Anda dengan beberapa penjelasan, untuk menghindari kesalahpahaman bahwa StackOverflow adalah layanan penulisan kode gratis.
Yunnosch

3

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

3

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


lebih dari setahun kemudian, saya berterima kasih atas sampel plunker. Sangat berguna.
bob.mazzo

3

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.


3

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


3

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)


2

Untuk objek:

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

2

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 :


2

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>

Terima kasih untuk tautannya.
PHP

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

1
ngOptions memberikan beberapa manfaat seperti mengurangi memori dan meningkatkan kecepatan dengan tidak membuat ruang lingkup baru untuk setiap instance berulang, lihat: docs.angularjs.org/api/ng/directive/ngOptions
mggSoft

1

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.


0

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)

0

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.


0

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 ]

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.