Bagaimanakah Saya Boleh Menggunakan Ungkapan Bersyarat dengan Berkesan dengan Arahan ngClass AngularJS?

Ungkapan Bersyarat dalam Arahan ngClass AngularJS

AngularJS menyediakan arahan ngClass untuk menambah dan mengalih keluar kelas CSS secara dinamik berdasarkan ungkapan yang diberikan. Walau bagaimanapun, memasukkan ungkapan bersyarat dalam ngClass boleh menjadi rumit.

Contoh Pendekatan

Satu percubaan menggunakan ungkapan secara langsung dalam ngClass, seperti:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}"></span>

Walau bagaimanapun, ungkapan ini sentiasa menggunakan kelas "ujian" tanpa mengira nilai obj.value1.

Untuk mengelakkan ini, anda boleh mentakrifkan fungsi yang mengembalikan nilai truthy atau falsey:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Kemudian, gunakan fungsi ini dalam ngClass:

<span ng-class="{test: checkValue1()}"></span>

Sintaks yang Betul untuk Ungkapan Bersyarat

Nota bahawa apabila menggunakan ungkapan bersyarat secara langsung dalam ngClass, anda harus meninggalkan petikan di sekitar ungkapan itu. Sintaks yang betul ialah:

{test: obj.value1 == 'someothervalue'}

Arahan Tersuai dan Ungkapan Tontonan

Jika anda mencipta arahan tersuai yang memerlukan ekspresi menonton, adalah penting untuk memahami bahawa AngularJS melakukannya tidak membenarkan menonton langsung ekspresi. Sebaliknya, anda boleh menggunakan kaedah $watch untuk melihat perubahan dalam nilai model tertentu.

Ciri Tambahan

ngClass menyokong pengendali logik, membolehkan anda mencipta ungkapan bersyarat yang kompleks . Contohnya:

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Ungkapan ini menggunakan kelas "ujian" jika sama ada obj.value1 bersamaan dengan 'someothervalue' atau obj.value2 adalah sama dengan 'somethingelse'.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Ungkapan Bersyarat dengan Berkesan dengan Arahan ngClass AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!