ng-opsi dengan init array sederhana

187

Saya sedikit bingung dengan Angular dan ng-options.

Saya memiliki array sederhana dan saya ingin init pilih dengan itu. Tapi, saya ingin opsi nilai = label.

script.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

Apa yang saya dapatkan:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

Apa yang saya inginkan:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

Jadi saya mencoba:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(Tapi itu tidak berhasil.)

Edit:

Formulir saya dikirimkan secara eksternal, itulah sebabnya saya perlu 'var1' sebagai nilai alih-alih 0.

Dragu
sumber

Jawaban:

304

Anda sebenarnya sudah benar dalam upaya ketiga Anda.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

Lihat contoh yang berfungsi di sini: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Triknya adalah AngularJS menulis kunci sebagai angka dari 0 hingga n, dan menerjemahkan kembali ketika memperbarui model.

Akibatnya, HTML akan terlihat salah tetapi model akan tetap diatur dengan benar ketika memilih nilai. (mis. AngularJS akan menerjemahkan '0' kembali ke 'var1')

Solusi oleh Epokk juga berfungsi, namun jika Anda memuat data secara tidak sinkron, Anda mungkin menemukannya tidak selalu diperbarui dengan benar. Menggunakan ngOptions akan menyegarkan dengan benar saat cakupan berubah.

James Davies
sumber
1
Anda berada di luar topik. Anda tidak mengerti instruksinya. Dia ingin valuedi miliknya select.
EpokK
10
Saya memahami instruksinya, namun kemungkinan besar niatnya adalah untuk mengikat 'nilai' ke model, dan salah memahami apa yang terjadi karena cara AngularJs memberikan tag.
James Davies
3
Ini berfungsi jika Anda mendapatkan nilai pilih dengan sudut, tetapi dalam kasus saya (yaitu formulir pengiriman klasik), nilai akan menjadi 0,1,2,3, bukan var1, var2, var3
Dragu
1
Saya berasumsi Anda mengikat ke model, tetapi jika Anda hanya menggunakan AngularJS untuk membuat formulir yang dikirimkan secara eksternal ke sudut, maka gunakan solusi EpokK.
James Davies
66
Apakah hanya saya, atau ini sintaks yang paling mendongkrak dan belum pernah terjadi?
fool4jesus
35

Anda bisa menggunakannya ng-repeatdengan optionseperti ini:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

Saat Anda mengirimkan, formAnda bisa mendapatkan nilai input yang disembunyikan.


DEMO

ng-terpilih ng-repeat

EpokK
sumber
Jika Anda telah menuliskan jawaban saya, periksa solusi baru saya.
EpokK
21

Anda bisa menggunakan sesuatu seperti

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

menggunakan ng-terpilih, Anda memilih pilihan dalam kasus myselect prefilled.

Saya lebih suka metode ini daripada ng-opsi, karena ng-opsi hanya berfungsi dengan array. ng-repeat juga berfungsi dengan objek seperti json.

iPirat
sumber
1
ng-optionsbekerja dengan sumber data objek juga. Lihat docs.angularjs.org/api/ng/directive/select
Charlie Schliesser
1
Meskipun yang lain memberikan solusi, solusinya sejauh ini adalah yang paling elegan dan dekat dengan gaya html lama, bekerja dengan kedua model sudut mengikat dan bentuk submital. Terima kasih!
Fadi Chamieh
4
ng-yang dipilih tidak perlu setang karena ini adalah arahan sudut. Solusi yang sangat baik.
Kasey Speakman
20

Jika Anda mengatur pilihan Anda seperti berikut:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

kamu akan mendapatkan:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

working fiddle: http://jsfiddle.net/x8kCZ/15/

Ida N
sumber
1
Solusi ini adalah satu-satunya yang bekerja untuk saya untuk memilih nilai awal dalam array string.
Ena
ya ini harus menjadi jawabannya, lintasan dengan melakukan keajaiban bagi saya.
Gurnard
Saya paling tidak mengharapkan setelah mengikuti solusi di atas tetapi ini adalah jalan keluar yang mudah
kantung Dahal
10
<select ng-model="option" ng-options="o for o in options">

$ scope.option akan sama dengan 'var1' setelah perubahan, bahkan Anda melihat value = "0" dalam html yang dihasilkan

plunker

Toolkit
sumber