Bagaimanakah anda membuat senarai dropdown dinamik dalam AngularJS menggunakan ng-options?

Bekerja dengan Select Menggunakan ng-options AngularJS

Dalam AngularJS, arahan ng-options membolehkan anda menjana elemen untuk berdasarkan tatasusunan atau sumber data objek. Ia menyediakan cara mudah untuk membuat senarai lungsur turun yang boleh terikat kepada pembolehubah skop.

Menjana Pilihan daripada Tatasusunan

Untuk menjana pilihan daripada tatasusunan, gunakan sintaks berikut:

<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">

di mana:

• selectedValue ialah pembolehubah model yang akan terikat pada pilihan yang dipilih
• item ialah tatasusunan yang mengandungi data untuk pilihan
• item.value ialah nilai yang akan digunakan untuk atribut nilai elemen pilihan
• item.label ialah teks yang akan dipaparkan untuk elemen pilihan

Contoh

Pertimbangkan pengawal AngularJS berikut:

$scope.items = [
  {id: '000001', title: 'Chicago'},
  {id: '000002', title: 'New York'},
  {id: '000003', title: 'Washington'}
];

Untuk menjadikan data ini sebagai dengan pilihan yang sepadan dengan nilai tajuk dan id setiap item, gunakan kod berikut:

<select ng-model="selectedItem" ng-options="item.id as item.title for item in items">

Memilih Pilihan Lalai

Untuk memilih pilihan tertentu secara lalai, gunakan arahan ng-init:

<select ng-model="selectedItem" ng-init="selectedItem = items[1]" ng-options="item.id as item.title for item in items">

Menyesuaikan Pilihan Lalai

Dengan menambahkan anak ke dengan atribut nilai kosong, anda boleh mencipta pilihan lalai tersuai:

<select ng-model="selectedItem">
  <option value="">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

Menyembunyikan Pilihan Lalai Selepas Pemilihan

Untuk menyembunyikan pilihan lalai tersuai selepas pilihan dibuat, gunakan ng- sembunyikan:

<select ng-model="selectedItem">
  <option value="" ng-hide="selectedItem">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

Atas ialah kandungan terperinci Bagaimanakah anda membuat senarai dropdown dinamik dalam AngularJS menggunakan ng-options?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!