从AngularJS v1.2 rc开始，ng-class甚至ng- atr -class在使用SVG元素时都失败了(它们在之前确实有效，即使是在class属性内部进行正常绑定)

具体来说，这些方法现在都不起作用:

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

作为一种变通办法，我不得不使用

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

然后使用样式

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

你可以使用三元表达式。有两种方法:

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

还是……

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

有一件事要注意-如果CSS样式有破折号-你必须删除它们。所以如果你想设置background-color，正确的方法是:

ng-style="{backgroundColor:myColor}" 

当我有一个类已经应用到整个表时，我在表元素中应用类时发现了问题(例如，应用到奇数行的颜色<myClass tbody tr:n -child(even) td>)。当您使用开发人员工具检查元素时，元素。样式没有指定样式。因此，我没有使用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是我正在评估的东西，在每种情况下，我根据Myvar值对每个<td>应用一个样式，它覆盖了CSS类为整个表应用的当前样式。

更新

如果你想将一个类应用到表中，例如，当访问一个页面或在其他情况下，你可以使用这个结构:

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

基本上，激活ng-class所需要的是要应用的类和true或false语句。True应用该类，false不应用该类。所以这里我们有两次对页面路由的检查，它们之间有一个OR，所以如果我们在/route_a OR中，我们在route_b中，活动类将被应用。

它只需要在右边有一个逻辑函数，返回true或false。

所以在第一个例子中，ng-style有三个条件语句。如果它们都为假，则不应用任何样式，但按照我们的逻辑，至少有一个将被应用，因此，逻辑表达式将检查哪个变量比较为真，因为非空数组总是为真，将留下一个数组作为返回，只有一个为真，考虑到我们对整个响应使用OR，剩余的样式将被应用。

顺便说一下，我忘了给你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>

字体图标

我最近发现还有一个选项，有些人可能会觉得它很有用，因为它允许你在一个样式元素中更改CSS规则——从而避免重复使用angular指令，如ng-style、ng-class、ng-show、ng-hide、ng-animate等。

这个选项使用了带有服务变量的服务，这些服务变量由控制器设置，并由一个我称之为“custom-style”的属性指令监视。这个策略可以用在许多不同的方面，我试图用这个小提琴提供一些一般性的指导。

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

下面是我如何有条件地在禁用按钮上应用灰色文本样式

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

下面是一个工作示例: https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html