Saya telah membacanya di posting lain, tetapi saya tidak bisa mengetahuinya.
Saya memiliki sebuah array,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Saya ingin menjadikannya sebagai:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Dan saya juga ingin memilih opsi dengan ID = 000002.
Saya telah membaca pilih dan mencoba, tetapi saya tidak dapat menemukannya.
javascript
angularjs
html-select
ng-options
Andrej Kaurin
sumber
sumber
Jawaban:
Satu hal yang perlu diperhatikan adalah ngModel diperlukan agar ngOptions berfungsi ... perhatikan
ng-model="blah"
yang berbunyi "set $ scope.blah ke nilai yang dipilih".Coba ini:
Berikut ini lebih banyak dari dokumentasi AngularJS (jika Anda belum melihatnya):
Untuk beberapa klarifikasi tentang nilai tag opsi di AngularJS:
Ketika Anda menggunakan
ng-options
, nilai tag opsi yang ditulis oleh ng-options akan selalu menjadi indeks item array yang terkait dengan tag opsi . Ini karena AngularJS sebenarnya memungkinkan Anda untuk memilih seluruh objek dengan kontrol pilih, dan bukan hanya tipe primitif. Sebagai contoh:Di atas akan memungkinkan Anda untuk memilih seluruh objek menjadi
$scope.selectedItem
langsung. Intinya, dengan AngularJS, Anda tidak perlu khawatir tentang apa yang ada di tag pilihan Anda. Biarkan AngularJS mengatasinya; Anda hanya harus peduli tentang apa yang ada dalam model Anda di ruang lingkup Anda.Di sini ada seorang plunker yang menunjukkan perilaku di atas, dan menunjukkan HTML yang ditulis
Berurusan dengan opsi default:
Ada beberapa hal yang saya gagal sebutkan di atas berkaitan dengan opsi default.
Memilih opsi pertama dan menghapus opsi kosong:
Anda dapat melakukan ini dengan menambahkan sederhana
ng-init
yang menetapkan model (daring-model
) ke elemen pertama dalam item yang Anda ulanging-options
:Catatan: Ini bisa menjadi sedikit gila jika
foo
kebetulan diinisialisasi dengan benar ke sesuatu yang "palsu". Dalam hal ini, Anda mungkin ingin menangani inisialisasifoo
di controller Anda, kemungkinan besar.Menyesuaikan opsi default:
Ini sedikit berbeda; di sini yang perlu Anda lakukan adalah menambahkan tag opsi sebagai anak pilihan Anda, dengan atribut nilai kosong, lalu sesuaikan teks dalamnya:
Catatan: Dalam hal ini opsi "kosong" akan tetap ada bahkan setelah Anda memilih opsi lain. Ini bukan kasus untuk perilaku default pilihan di bawah AngularJS.
Opsi default khusus yang bersembunyi setelah seleksi dibuat:
Jika Anda ingin opsi default khusus Anda hilang setelah Anda memilih nilai, Anda bisa menambahkan atribut ng-hide ke opsi default Anda:
sumber
<option value="?" selected="selected"></option>
)?ng-if="foo"
saya harus menggunakanng-if=!foo
untuk menyembunyikan opsi kosong default ketika opsi lain dipilih. Juga, opsi kosong standar selalu muncul di bagian bawah daftar kombo. Bagaimana saya bisa meletakkannya di awal daftar kombo?Saya belajar AngularJS dan berjuang dengan seleksi juga. Saya tahu pertanyaan ini sudah dijawab, tetapi saya ingin berbagi beberapa kode lagi.
Dalam pengujian saya, saya memiliki dua kotak daftar: merek mobil dan model mobil. Daftar model dinonaktifkan hingga beberapa make dipilih. Jika pilihan dalam make listbox kemudian diatur ulang (atur ke 'Select Make') maka kotak daftar model menjadi dinonaktifkan lagi DAN pemilihannya diatur ulang juga (ke 'Select Model'). Makes diambil sebagai sumber daya sementara model hanya kode keras.
Membuat JSON:
layanan.js:
File HTML:
controllers.js:
sumber
ng-model
harus menunjuk ke variabel lain pada ruang lingkup Anda, tidak terkait denganmake
. Lihat contoh di docs.angularjs.org/api/ng/directive/ngOptionsUntuk beberapa alasan, AngularJS membuat saya bingung. Dokumentasi mereka sangat mengerikan dalam hal ini. Contoh variasi yang lebih baik akan diterima.
Bagaimanapun, saya memiliki sedikit variasi pada jawaban Ben Lesh.
Koleksi data saya terlihat seperti ini:
Sekarang
masih menghasilkan nilai opsi menjadi indeks (0, 1, 2, dll.).
Menambahkan Track Dengan memperbaikinya untuk saya:
Saya rasa itu lebih sering terjadi bahwa Anda ingin menambahkan array objek ke daftar pilih, jadi saya akan mengingat yang satu ini!
Ketahuilah bahwa dari AngularJS 1.4 Anda tidak dapat menggunakan opsi-ng lagi, tetapi Anda perlu menggunakannya
ng-repeat
pada tag opsi Anda:sumber
option
?Pertanyaannya sudah dijawab (BTW, jawaban yang benar-benar bagus dan komprehensif disediakan oleh Ben), tetapi saya ingin menambahkan elemen lain untuk kelengkapan, yang mungkin juga sangat berguna.
Dalam contoh yang disarankan oleh Ben:
berikut ngOptions bentuk telah digunakan:
select as label for value in array
.Label adalah ekspresi, yang hasilnya akan menjadi label untuk
<option>
elemen. Dalam hal ini Anda dapat melakukan penggabungan string tertentu, untuk memiliki label opsi yang lebih kompleks.Contoh:
ng-options="item.ID as item.Title + ' - ' + item.ID for item in items"
memberi Anda label sukaTitle - ID
ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"
memberi Anda label sepertiTitle (X)
, di manaX
panjang string Judul.Anda juga dapat menggunakan filter, misalnya,
ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"
memberi Anda label sepertiTitle (TITLE)
, di mana nilai Judul properti Judul dan TITLE adalah nilai yang sama tetapi dikonversi ke karakter huruf besar.ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"
memberi Anda label sepertiTitle (27 Sep 2015)
, jika model Anda memiliki propertiSomeDate
sumber
Dalam CoffeeScript:
sumber
radix
untukparseInt
: http://davidwalsh.name/parseint-radixJika Anda memerlukan judul khusus untuk setiap opsi,
ng-options
tidak berlaku. Alih-alih gunakanng-repeat
dengan opsi:sumber
Saya harap yang berikut ini akan berhasil untuk Anda.
sumber
Ini bisa bermanfaat. Binding tidak selalu berfungsi.
Misalnya, Anda mengisi model sumber daftar opsi dari layanan REST. Nilai yang dipilih diketahui sebelum mengisi daftar, dan itu ditetapkan. Setelah menjalankan permintaan REST dengan $ http, opsi daftar selesai.
Tetapi opsi yang dipilih tidak diatur. Untuk alasan yang tidak diketahui AngularJS dalam menjalankan shadow $ digest tidak mengikat sebagaimana yang seharusnya. Saya harus menggunakan jQuery untuk mengatur yang dipilih. Itu penting! AngularJS, dalam bayangan, menambahkan awalan ke nilai attr "value" untuk dihasilkan oleh opsi ng-repeat. Untuk int itu adalah "nomor:".
sumber