Bagaimanakah Saya Boleh Menggunakan AngularJS ngClass dengan Ungkapan Bersyarat?

Memahami AngularJS ngClass Conditional Statements

Dalam AngularJS, arahan ngClass sering digunakan untuk menggunakan kelas CSS secara bersyarat berdasarkan penilaian yang disediakan ungkapan. Walaupun fungsi ini mudah, terdapat nuansa tertentu yang perlu dipertimbangkan.

Ungkapan Bersyarat dalam ngClass

Untuk mencipta ungkapan bersyarat dengan ngClass, hanya gunakan sintaks berikut:

<span ng-class="{test: <expression>}">test</span>

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ungkapan itu mesti menilai kepada kebenaran atau nilai falsey, tanpa memerlukan petikan. Oleh itu, kod berikut tidak akan berfungsi:

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

Sebaliknya, gunakan yang berikut:

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

Jika ungkapan dinilai kepada benar, kelas ujian akan digunakan pada elemen. Jika tidak, ia tidak akan digunakan.

Ungkapan Kompleks

Untuk keadaan kompleks yang tidak boleh dinyatakan menggunakan perbandingan mudah, anda boleh menggunakan fungsi yang mengembalikan kebenaran atau nilai falsey.

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

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

Arahan Tersuai dengan Bersyarat Ungkapan

Anda juga boleh membuat arahan tersuai yang menyokong ungkapan bersyarat menggunakan fungsi had dan penyusunan.

myApp.directive('customConditional', function() {
  return {
    restrict: 'A',
    compile: function(tElement, tAttrs) {
      var expression = tAttrs.customConditional;
      return function postLink(scope, element) {
        scope.$watch(expression, function(newValue) {
          if (newValue) {
            element.addClass('my-class');
          } else {
            element.removeClass('my-class');
          }
        });
      };
    }
  };
});

Kesimpulan

Menggunakan ngClass dengan ungkapan bersyarat memerlukan pemahaman tentang cara ekspresi dinilai dalam AngularJS. Dengan menerima nilai truthy dan falsey, dan menggunakan fungsi untuk keadaan yang kompleks, anda boleh menggunakan kelas CSS dengan berkesan berdasarkan kriteria dinamik.

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