Css 函数返回true或false <div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

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

此选项使用带有服务变量的服务，这些服务变量由控制器设置，并由属性指令监视，我称之为“自定义样式”。这个策略可以用很多不同的方式使用，我试图提供一些通用的指导

var-app=angular.module（'myApp'，['ui.bootstrap']）；
应用程序服务（'MainService'，函数（）{
var vm=这个；
});
应用控制器（'MainCtrl'，功能（MainService）{
var vm=这个；
vm.ms=MainService；
});
应用指令（'customStyle'，函数（MainService）{
返回{
限制：“A”，
链接：功能（范围、元素、属性）{
变量样式=角度元素（“”）；
元素。追加（样式）；
作用域.$watch（函数（）{return MainService.theme；}，
函数（）{
var css=''；
angular.forEach（MainService.theme，函数（选择器，键）{
angular.forEach（MainService.theme[key]，function（val，k）{
css+=key+'{'+k+'：'+val+'}'；
});                        
});
html（css）；
}，对）；
}
};
});

当您需要一个或两个属性的简单css样式时，另一个选项：

视图：

---

可以使用三元表达式。有两种方法可以做到这一点：

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

或者

---

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

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
样式URL:['./app.component.css']，
模板：`
{{btnText}}
`
})
导出类AppComponent{
名称='角度'；
btnText='单击我'；
btnDisabled=false；
buttonClick1（）{
this.btnDisabled=true；
this.btnText='你点击了我'；
设置超时（（）=>{
this.btnText='再次单击我'；
this.btnDisabled=false
}, 5000);
}
}

下面是一个工作示例：

---

---

我在中没有看到任何提到ng attr的内容--您有链接吗？对不起，没有链接。我在Angular论坛上发现了这一点，虽然我记不起确切的页面对不起。最新的文档（v1.2）在ngAttr属性绑定一节中描述了

ng attr-

。对于1.2，这是一个很好的答案<代码>ng类不允许执行逻辑，但

ng attr类

允许执行逻辑。它们都有各自的用途，但我敢打赌，很多开发人员都会寻找

ngattr类

。当这里提供的其他解决方案失败时，我发现这一点很好。谢谢。这个答案太棒了！如果click事件在非clicked元素的区域上更改/添加类，您愿意通过jsfiddle向我展示区别吗？在页面的其他地方写一个div。这是一篇非常有用的文章。顺便说一句，你有没有尝试过将角度过滤器应用于ng风格？我建议添加一个与Q2相关的附加选项，我刚刚在回答这个问题时添加了这个选项。这是一个多么奇怪的语法，&&应该意味着什么，就像其他c语言一样language@PizzaiolaGorgonzola&&表示和| |表示或。这是一个聪明的黑客使用短路逻辑几乎作为一个案例/开关声明…感谢麻省理工学院。我没有意识到这个细节。新的更新部分很有魅力+一个！使用了新更新中提到的ng类的例子，对我来说效果很好。很好，你不必这么做。ng style=“{'background-color'：myColor}”效果非常好。有用的文章总是避免使用iF-word，我鼓励避免直接使用class属性。这将覆盖其他插件对此元素所做的更改。也许你会发现它更好：Dudi，如果不是更好，也同样有用，所以我将它添加到@maykel的“三元表达式”答案中。谢谢你们两个！问题的标签上写着“AngularJS”，但事实并非如此。

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

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

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

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

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

ng-style="{backgroundColor:myColor}" 

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

</style>

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

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

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

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

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

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

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

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

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

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