AngularJS의 항목 목록에 조건부 클래스를 효율적으로 적용하려면 어떻게 해야 합니까?

AngularJS의 조건부 클래스 적용 모범 사례

AngularJS에서는 여러 가지 방법으로 요소에 클래스를 조건부로 적용할 수 있습니다. 특정 시나리오에 따라 가장 최적의 솔루션을 살펴보겠습니다.

시나리오: 배열이 정렬되지 않은 목록으로 렌더링되고 selectedIndex 제어된 인덱스를 사용하여 목록 항목에 클래스를 추가하려고 합니다. 컨트롤러의 selectedIndex 속성으로

초기화 접근 방식:

현재 목록 항목 코드를 수동으로 복제하고 목록 항목 태그 중 하나에 클래스를 추가하고 있습니다. 이 방법은 효과가 있지만 불필요한 중복이 발생합니다.

해결책 1: 평가된 표현식이 포함된 ng-class 지시문

컨트롤러에서 CSS 클래스 이름을 사용하는 대신 다음을 수행할 수 있습니다. 클래스 이름을 동적으로 설정하려면 표현식을 사용하세요. 방법은 다음과 같습니다.

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

참고: 이 접근 방식에 필요한 평가 메커니즘으로 인해 콜론이 있는 이전 구문을 사용하세요.

해결책 2: ng -class 조건부 객체 지시문

AngularJS는 객체 할당도 지원합니다. ng-class 지시어. 각 속성 이름은 클래스 이름을 나타내며 해당 값은 클래스 적용 여부를 결정합니다.

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

추가 참고:

두 솔루션 모두 동일한 결과를 달성하지만, 기능적으로 동일하지 않습니다. 솔루션 2를 사용하면 모델 속성을 클래스 이름에 매핑하고 이를 컨트롤러 코드에서 제외할 수 있습니다. 이를 통해 유연성이 향상되고 코드 가독성이 향상됩니다.

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