Angular.js의 다이내믹 클래스

Angular.js의 다이내믹 클래스

css 클래스를 동적으로 추가하고 싶다.<li>루프 오버하고 있는 요소.루프는 다음과 같습니다.

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

Todo 모델에서는 속성 우선순위가 "긴급", "중요하지 않음" 또는 "보통"으로 되어 있으며 각 요소에 대해 클래스를 할당하고 싶을 뿐입니다.

부울에 대해서 이렇게 할 수 있다는 걸 알아요ng-class="{'urgent': todo.urgent}"단, 변수는 부울이 아니라 3개의 값이 있습니다.이거 어떻게 해요?또, 사용하고 싶지 않은 것도 주의해 주세요.ng-style="..."왜냐하면 우리 반은 시각적인 것들을 바꿀 것이기 때문이다.

함수를 식으로 할당하고 거기에서 적절한 클래스를 반환하기만 하면 됩니다.편집: 동적 클래스를 위한 더 나은 솔루션도 있습니다. 아래 참고 사항을 참조하십시오.

뷰의 스니펫:

<div ng-class="appliedClass(myObj)">...</div>

컨트롤러:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

더 나은 방법

저는 최근에 또 다른 접근법에 대해 배웠습니다.조작하는 클래스에 대응하는 속성을 가지는 오브젝트를 전달합니다.값은 식 또는 부울 변수입니다.간단한 예:

ng-class="{ active: user.id == activeId }"

이 경우active클래스가 요소에 추가됩니다.user.id일치하다activeId에서$scope오브젝트!

클래스만 추가하려면class보간 기능이 있는 속성:

class="priority-is-{{todo.priority}}"

거의 맞췄어 :)
보간 마크업이 없어야 합니다({{그리고.}}):

<li ng-repeat="todo in todos" ng-class="todo.priority">
...

이것은 3진법으로 동적으로 실행할 수 있습니다.

ng-class="service.Icon != '' ? service.Icon : 'fas fa-arrow-alt-circle-right'"

위 코드는 null이 아닌 경우 Icon에 저장된 클래스를 주입하고 포함되지 않은 경우 두 번째 클래스로 기본 설정합니다.

이렇게 하면 여러 개의 클래스가 허용됩니다.

위의 답변에서는 databound instance에서 function()을 호출하면 상태가 변화할 경우 문서 소비 루프가 발생할 수 있습니다.콘솔 쓰기를 넣으면 페이지가 100번 렌더링된 후 루프가 정지될 수 있습니다.

메모: 3진법을 사용할 때는 오브젝트 {}을(를) 주위에 두지 마십시오.에러가 발생합니다.

언급URL : https://stackoverflow.com/questions/14643836/dynamic-class-in-angular-js