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

AngularJS를 사용한 조건부 클래스 애플리케이션

AngularJS에서는 특정 조건에 따라 요소에 클래스를 조건부로 적용해야 하는 시나리오가 발생할 수 있습니다. 이를 효율적으로 달성할 수 있는 방법은 다음과 같습니다.

문제:

각 요소에 대해 li 태그가 있는 ul로 렌더링되는 요소 배열을 고려해 보세요. 컨트롤러에 selectedIndex 속성이 있고 해당 인덱스를 사용하여 li에 클래스를 추가하려고 합니다.

해결책:

1. ng-class 사용:

AngularJS는 표현식을 기반으로 클래스를 동적으로 적용할 수 있는 ng-class 지시어를 제공합니다. selectedIndex가 있는 li에 "selected" 클래스를 조건부로 적용하려면 다음을 사용할 수 있습니다.

<li ng-class="{selected: $index == selectedIndex}">...</li>

2. ng:class:

(v1 이전 구문)

v1 이전 AngularJS 버전의 경우 평가 표현식과 함께 ng:class를 사용할 수 있습니다. 클래스 이름에 직접 연결됩니다. 예:

<li ng:class="{true:'selected', false:''}[$index == selectedIndex]">...</li>

솔루션 비교:

두 솔루션 모두 동일한 결과를 달성하지만 기능면에서는 다릅니다.

• ng-class는 속성 이름이 클래스 이름을 나타내고 속성 값이 클래스가 클래스인지 여부를 결정하는 객체를 허용합니다. 적용되었습니다. 이를 통해 더 복잡한 클래스 애플리케이션 논리가 가능해집니다.
• ng:class에는 특정 클래스 이름으로 평가되는 식이 필요하며 여러 클래스를 조건부로 처리하는 데 유연성이 떨어집니다.

추가 참고 사항:

이 기술을 사용하여 모델 속성을 클래스에 매핑할 수도 있습니다. 이름을 지정하고 CSS 클래스를 컨트롤러 코드에서 제외합니다. 예:

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

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