AngularJS에서 클래스를 조건부로 적용하려면 어떻게 해야 합니까?

AngularJS에서 조건부 클래스 적용을 위한 우아한 솔루션

요소 배열을 표시할 때 특정 요소를 강조 표시해야 할 수도 있습니다. 부동산에. AngularJS에서는 여러 가지 방법으로 클래스를 조건부로 적용할 수 있습니다.

이상적이지는 않지만 간단한 해결책 중 하나는 목록 요소(li)를 수동으로 복제하고 선택한 항목에 해당하는 요소에 클래스를 추가하는 것입니다. 색인. 그러나 AngularJS는 이 작업을 수행하기 위한 보다 정교한 방법을 제공합니다.

표현 기반 클래스 할당

selectedIndex 인덱스를 사용하여 li에 클래스를 직접 추가하려면 다음을 수행할 수 있습니다. ng-class 지시문 내에서 조건식을 사용하십시오.

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

이 표현식은 다음 중 하나로 평가됩니다. 현재 인덱스가 selectedIndex와 일치하면 'selected', 그렇지 않으면 빈 문자열입니다.

객체 기반 클래스 매핑

새로운 구문을 사용하면 다음을 기반으로 클래스를 할당할 수 있습니다. 객체를 반환하는 표현식:

ng-class="{selected: $index==selectedIndex}"

이 경우 현재 'selected' 속성은 클래스로 적용됩니다. 인덱스는 selectedIndex와 일치합니다.

속성-클래스 이름 매핑

보다 유연한 접근 방식을 위해 모델 속성을 클래스 이름에 직접 매핑할 수 있습니다.

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

이 표현식은 user.role 속성을 사용하여 적용할 클래스를 결정합니다. 예를 들어 사용자의 역할이 'admin'인 경우 'enabled' 클래스가 요소에 추가됩니다.

위 내용은 AngularJS에서 클래스를 조건부로 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!