Bagaimana untuk Menetapkan Pilihan Lalai dalam Kotak Pilih AngularJS?

Tetapkan Pilihan Lalai dalam Kotak Pilih AngularJS

Dalam AngularJS, kotak pilih boleh dimulakan dengan mudah dengan pilihan lalai menggunakan pelbagai kaedah. Mari kita terokai cara untuk mencapai ini dengan pendekatan yang berbeza:

Menggunakan ng-init

Ini ialah cara mudah untuk menetapkan pilihan lalai. Hanya tambahkan arahan ng-init pada kotak pilih dan tetapkan nilai lalai yang dikehendaki kepada sifat model. Contohnya:

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options">
</select>

Menggunakan Pengesanan Perubahan

Kaedah ini menggunakan mekanisme pengesanan perubahan AngularJS. Dengan menetapkan jam tangan pada sifat model dan menetapkan nilai lalai secara manual jika ia pada mulanya tidak ditentukan, anda boleh mencapai hasil yang diingini:

<select ng-model="somethingHere" ng-options="option.name for option in options">
</select>

<div ng-controller="MyCtrl">
  $scope.$watch('somethingHere', function(newVal) {
    if (!newVal) {
      $scope.somethingHere = options[0];
    }
  });
</div>

Menggunakan ng-if

Dengan ng-if, anda boleh memberikan pilihan secara bersyarat seperti yang dipilih berdasarkan nilai model property:

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-if="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

Menggunakan Arahan ng-selected

Arahan ini membolehkan anda menentukan syarat yang, apabila dinilai kepada benar, akan menjadikan pilihan dipilih. Ia boleh digunakan seperti berikut:

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-selected="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

Pilih kaedah yang paling sesuai dengan keperluan anda dan nikmati kemudahan menetapkan pilihan lalai dalam kotak pilihan AngularJS anda.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Pilihan Lalai dalam Kotak Pilih AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!