Jak warunkowo zastosować style CSS w AngularJS?

Znalazłem problemy przy stosowaniu klas wewnątrz tabeli elementów, gdy jedna klasa została już zastosowana do całej tabeli (na przykład kolor zastosowany do nieparzystych wierszy <myClass tbody tr:nth-child(even) td>). Wygląda na to, że gdy sprawdzasz element za pomocą narzędzi programistycznych , element.style nie ma przypisanego stylu. Zamiast używać ng-class, próbowałem użyć ng-style i w tym przypadku nowy atrybut CSS pojawia się wewnątrz element.style. Ten kod działa dla mnie świetnie:

<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 jest co oceniam i w każdym przypadku stosuję styl do każdej <td>w zależności od wartości myvar, który nadpisuje bieżący styl zastosowany przez klasę CSS dla całej tabeli.

UPDATE

Jeśli chcesz zastosować klasę do tabeli, na przykład podczas odwiedzania strony lub w innych przypadkach, możesz użyć tej struktury:

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

Zasadniczo, to, czego potrzebujemy do aktywacji klasy ng, to klasa do zastosowania i prawdziwe lub fałszywe oświadczenie. True stosuje klasę, A false nie. więc tutaj mamy dwa sprawdzania trasy strony i lub pomiędzy nimi, więc jeśli jesteśmy w /route_a lub jesteśmy w route_b, zostanie zastosowana klasa active.

To działa po prostu mając funkcję logiczną po prawej stronie, która zwraca true lub false.

Więc w pierwszym przykładzie, ng-style jest uwarunkowane trzema stwierdzeniami. Jeśli wszystkie z nich są fałszywe, nie stosuje się żadnego stylu, ale zgodnie z naszą logiką, co najmniej jedna zostanie zastosowana, więc wyrażenie logiczne sprawdzi, które porównanie zmiennych jest prawdziwe, a ponieważ nie pusta tablica jest zawsze prawdziwa, która pozostawi tablicę jako zwrot i tylko z jedną prawdą, biorąc pod uwagę, że używamy lub dla całej odpowiedzi, zastosowany zostanie pozostały styl.

Przy okazji, zapomniałem podać funkcję isActive ():

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

NOWA AKTUALIZACJA

Tutaj masz coś, co znalazłem naprawdę przydatne. Gdy musisz zastosować klasę zależną od wartości zmiennej, na przykład ikonę zależną od zawartości div, możesz użyć następującego kodu (bardzo przydatnego w ng-repeat):

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

Icons from Font Awesome

To działa dobrze, gdy nie można użyć ng-class (na przykład podczas stylizacji SVG):

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

(myślę, że musisz być na najnowszym unstable Angular, aby użyć ng-attr -, obecnie jestem na 1.1.4)

Opublikowałem artykuł na temat pracy z AngularJS + SVG. Mówi o tym problemie i wielu innych. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

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

I Kod

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

Css

.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);
}

To rozwiązanie mi pomogło

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

Inna opcja, gdy potrzebujesz prostego stylu css z jedną lub dwiema właściwościami:

Widok:

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

Kontroler:

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

Możesz użyć wyrażenia trójkowego. Można to zrobić na dwa sposoby:

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

Lub...

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

Zobacz następujący przykład

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

Od AngularJS v1.2.0 rc, ng-class a nawet ng-attr-class nie działają z elementami SVG (działały wcześniej, nawet z normalnym wiązaniem wewnątrz atrybutu klasy)

W szczególności, żadne z nich nie działa teraz:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

Jako obejście muszę użyć

ng-attr-otherAttr="{{current==this_element?'active':''}}"

A następnie style używając

[otherAttr='active'] {
   ... styles ...
}

Jeszcze jeden (w przyszłości) sposób warunkowego stosowania stylu jest poprzez warunkowe tworzenie stylu scoped

<style scoped type="text/css" ng-if="...">

</style>

Ale obecnie tylko FireFox obsługuje style scoped.

Jest jeszcze jedna opcja, którą niedawno odkryłem, że niektórzy ludzie mogą uznać za przydatną, ponieważ pozwala ona zmienić regułę CSS w elemencie stylu - unikając w ten sposób potrzeby wielokrotnego używania dyrektywy kątowej, takiej jak ng-style, ng-class, ng-show, ng-hide, ng-animate i innych.

Ta opcja wykorzystuje usługę ze zmiennymi service, które są ustawiane przez kontroler i nadzorowane przez atrybut-dyrektywę, którą nazywam "custom-style". Strategia ta może być stosowana w wielu różne sposoby, a ja starałem się zapewnić ogólne wskazówki z tym .

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

Sugerowałbym sprawdzenie warunku w kontrolerze za pomocą funkcji zwracającej true lub false .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

I w kontrolerze sprawdź stan

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

Jedną rzeczą do obejrzenia jest - jeśli styl CSS ma myślniki - musisz je usunąć. Więc jeśli chcesz ustawić background-color, poprawnym sposobem jest:

ng-style="{backgroundColor:myColor}"