AngularJS ngClass 조건부

질문 : AngularJS ngClass 조건부

---

ng-class 와 같은 것을 조건부로 표현하는 방법이 있습니까?

예를 들어, 다음을 시도했습니다.

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

이 코드의 문제는 obj.value1 이 무엇이든 클래스 테스트가 항상 요소에 적용된다는 것입니다. 이렇게 :

<span ng-class="{test: obj.value2}">test</span>

obj.value2 가 진실 값과 같지 않으면의 클래스가 적용되지 않습니다. 이제 다음을 수행하여 첫 번째 예제의 문제를 해결할 수 있습니다.

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

checkValue1 함수는 다음과 같습니다.

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

ng-class 가 작동하는 방식인지 궁금합니다. 이와 비슷한 작업을 수행하려는 사용자 지정 지시문도 작성 중입니다. 그러나 나는 표현을 보는 방법을 찾을 수 없습니다 (그리고 그것은 불가능하고 이것이 왜 이렇게 작동하는지 이유).

내가 의미하는 바를 보여주는 plnkr이 있습니다.

답변

---

첫 번째 시도는 거의 옳았습니다. 따옴표 없이도 작동합니다.

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

다음은 plnkr 입니다.

ngClass 지시문은 진실 또는 거짓을 평가하는 모든 표현식에서 작동합니다. Javascript 표현식과 약간 비슷하지만 약간의 차이점이 있습니다. 여기에서 읽을 수 있습니다. 조건부가 너무 복잡하면 세 번째 시도에서했던 것처럼 진실 또는 거짓을 반환하는 함수를 사용할 수 있습니다.

보완하기 위해 : 논리 연산자를 사용하여 다음과 같은 논리식을 형성 할 수도 있습니다.

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

출처 : https://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional