Wie wende ich CSS-Stile in AngularJS bedingt an?

Ich habe Probleme beim Anwenden von Klassen in table - Elementen gefunden, wenn bereits eine Klasse auf die gesamte Tabelle angewendet wurde (z. B. eine Farbe auf die ungeraden Zeilen <myClass tbody tr:nth-child(even) td>). Es scheint, dass, wenn Sie das Element mit Developer Tools untersuchen, dem element.style kein Stil zugewiesen ist. Anstatt ng-class zu verwenden, habe ich versucht, ng-style zu verwenden, und in diesem Fall erscheint das neue CSS-Attribut in element.style. Dieser Code funktioniert gut für mich:

<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 bewerte ich, und in jedem Fall wende ich für jeden <td> einen Stil an, abhängig vom myvar -Wert, der den aktuellen Stil überschreibt, der von der CSS-Klasse für die gesamte Tabelle angewendet wird.

UPDATE

Wenn Sie beispielsweise auf eine Seite oder in anderen Fällen eine Klasse auf die Tabelle anwenden möchten, können Sie diese Struktur verwenden:

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

Grundsätzlich benötigen wir zur Aktivierung einer ng-class die anzuwendende Klasse und eine True- oder False-Anweisung. True wendet die Klasse an und false nicht. Hier haben wir also zwei Überprüfungen der Route der Seite und ein ODER zwischen ihnen. Wenn wir also in /route_aODER sind, befinden wir uns in route_b, die Klasse active angewendet werden.

Dies funktioniert nur mit einer Logikfunktion auf der rechten Seite, die wahr oder falsch zurückgibt.

Im ersten Beispiel wird ng-style von drei Anweisungen konditioniert. Wenn alle falsch sind, wird kein Stil angewendet. In Übereinstimmung mit unserer Logik wird jedoch mindestens einer angewendet. Der Logikausdruck überprüft also, welcher Variablenvergleich wahr ist. Da ein nicht leeres Array immer wahr ist, wird dies der Fall sein Ein Array als Rückgabewert hinterlassen, und mit nur einem einzigen Wert. Wenn Sie für die gesamte Antwort ODER verwenden, wird der verbleibende Stil angewendet.

Ich habe übrigens vergessen, dir die Funktion isActive () zu geben:

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

NEUES UPDATE

Hier haben Sie etwas, das ich wirklich nützlich finde. Wenn Sie eine Klasse abhängig vom Wert einer Variablen anwenden müssen, z. B. ein Symbol, das vom Inhalt der div abhängt, können Sie den folgenden Code verwenden (sehr nützlich in 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 von Font Awesome

Dies funktioniert gut, wenn ng-class nicht verwendet werden kann (zum Beispiel beim SVG-Styling):

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

(Ich denke, du musst auf dem neuesten instabilen Angular sein, um ng-attr- verwenden zu können, ich bin derzeit auf 1.1.4.)

Ich habe einen Artikel über die Arbeit mit AngularJS + SVG veröffentlicht. Es spricht über dieses Thema und zahlreiche andere. http://www.codeproject.com/Articles/709340/Implementierung-a-Flowchart-mit-SVG-und-AngularJS

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

und Code

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

Diese Lösung hat mir geholfen

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

Eine weitere Option, wenn Sie einen einfachen CSS-Stil mit einer oder zwei Eigenschaften benötigen:

Aussicht:

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

Regler:

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

Sie können einen ternären Ausdruck verwenden. Es gibt zwei Möglichkeiten, dies zu tun:

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

oder...

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

Siehe folgendes Beispiel

<!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>

Seit AngularJS v1.2.0rc schlagen ng-class und sogar ng-attr-class mit SVG-Elementen fehl (sie funktionierten früher, selbst mit normaler Bindung im Klassenattribut)

Im Einzelnen funktioniert jetzt keiner von diesen:

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

Als Workaround muss ich verwenden 

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

und dann mit formatieren

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

nun, ich würde Ihnen vorschlagen, den Zustand in Ihrem Controller mit einer Funktion zu überprüfen, die true oder false liefert.

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

und überprüfen Sie in Ihrem Controller den Zustand 

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

Eine weitere Möglichkeit (in Zukunft), den Stil bedingt anzuwenden, besteht darin, einen bereichsabhängigen Stil zu erstellen

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

</style>

Heutzutage unterstützt nur FireFox Scope.

Ich habe kürzlich eine weitere Option entdeckt, die für manche Benutzer nützlich sein könnte, da sie es Ihnen ermöglicht, eine CSS-Regel innerhalb eines style-Elements zu ändern. ng-show, ng-hide, ng-animieren und andere.

Diese Option verwendet einen Dienst mit Dienstvariablen, die von einem Controller festgelegt und von einer Attribut-Direktive überwacht werden, die ich als "benutzerdefinierten Stil" bezeichne. Diese Strategie kann auf viele verschiedene Arten verwendet werden, und ich habe versucht, mit dieser Geige einige allgemeine Hinweise zu geben.

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

Beachten Sie Folgendes: Wenn der CSS-Stil Bindestriche enthält, müssen Sie diese entfernen. Wenn Sie also background-color einstellen möchten, lautet der korrekte Weg:

ng-style="{backgroundColor:myColor}" 

So habe ich den grauen Textstil auf einen deaktivierten Button angewendet

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

Hier ist ein Arbeitsbeispiel:
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html