전체 테이블에 이미 하나의 클래스가 적용된 경우 테이블 요소 내부에 클래스를 적용 할 때 문제가 있음을 발견했습니다 (예 : 홀수 행에 적용된 색상 <myClass tbody tr:nth-child(even) td>). 당신이 가진 요소를 검사 할 때 것으로 보인다 개발자 도구 는이 element.style할당 된 스타일이 없습니다. 따라서을 사용하는 대신을 사용해 ng-class보았습니다 ng-style.이 경우 새로운 CSS 속성이 안에 나타납니다 element.style. 이 코드는 저에게 효과적입니다.

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar 은 내가 평가하는 것이며 각 경우 <td>에 myvar 값 에 따라 각각의 스타일을 적용하여 전체 테이블의 CSS 클래스에 의해 적용된 현재 스타일을 덮어 씁니다.

최신 정보

예를 들어, 페이지를 방문하거나 다른 경우에 클래스를 테이블에 적용하려면 다음 구조를 사용할 수 있습니다.

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

기본적으로 ng-class 를 활성화해야하는 것은 적용 할 클래스와 true 또는 false 문입니다. True 는 클래스를 적용하고 false 는 적용 하지 않습니다. 그래서 여기에 우리는 페이지의 경로와 두 검사가 또는 우리에 그렇다면, 그들 사이 /route_a 또는 우리에 route_b의 활성 클래스가 적용됩니다.

이것은 오른쪽에 논리 함수를 사용하여 true 또는 false를 반환합니다.

첫 번째 예에서 ng-style 은 세 가지 문장으로 구성됩니다. 이들 모두가 거짓이면 스타일이 적용되지 않지만 논리에 따라 하나 이상이 적용되므로 논리 표현식은 어떤 변수 비교가 참인지 확인하고 비어 있지 않은 배열이 항상 참이므로 논리식은 전체 응답에 OR 을 사용한다는 점을 고려하면 배열을 반환으로 반환하고 하나만 true로 남겨두고 나머지 스타일이 적용됩니다.

그건 그렇고, isActive () 함수를 제공하는 것을 잊었습니다.

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

새로운 업데이트

여기에 정말 유용한 것이 있습니다. 변수 값에 따라 클래스를 적용해야하는 경우 (예 :의 내용에 따라 아이콘) div다음 코드를 사용할 수 있습니다 (에서 매우 유용함 ng-repeat).

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

글꼴 멋진 아이콘

답변

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

span class="circle circle-{{selectcss(document.Extension)}}">

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

<tr ng-repeat="element in collection">
    [...amazing code...]
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};