AngularJS의 ngClass 지시문과 함께 조건식을 효과적으로 사용하려면 어떻게 해야 합니까?

AngularJS ngClass 지시문의 조건식

AngularJS는 주어진 표현식을 기반으로 CSS 클래스를 동적으로 추가하고 제거하는 ngClass 지시문을 제공합니다. 그러나 ngClass 내에 조건식을 통합하는 것은 까다로울 수 있습니다.

접근 방법의 예

한 가지 시도는 ngClass 내에서 다음과 같은 표현식을 직접 사용하는 것입니다.

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

그러나 이 표현식은 값에 관계없이 항상 "test" 클래스를 적용합니다. obj.value1.

이를 방지하려면 참 또는 거짓 값을 반환하는 함수를 정의할 수 있습니다.

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

그런 다음 ngClass 내에서 이 함수를 사용하세요.

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

조건부의 올바른 구문 표현식

ngClass에서 직접 조건식을 사용할 때는 표현식 주위의 따옴표를 생략해야 합니다. 올바른 구문은 다음과 같습니다.

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

Custom Directing and Watch Expressions

식 관찰이 필요한 사용자 정의 지시문을 생성하는 경우 AngularJS가 수행한다는 점을 이해하는 것이 중요합니다. 표현을 직접 관찰하는 것을 허용하지 않습니다. 대신 $watch 메소드를 사용하여 특정 모델 값의 변화를 관찰할 수 있습니다.

추가 기능

ngClass는 논리 연산자를 지원하므로 복잡한 조건식을 만들 수 있습니다. . 예:

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

obj.value1이 'someothervalue'와 같거나 obj.value2가 'somethingelse'와 같은 경우 이 표현식은 "test" 클래스를 적용합니다.

위 내용은 AngularJS의 ngClass 지시문과 함께 조건식을 효과적으로 사용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!