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

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

我建议你用一个返回true或false的函数来检查控制器中的条件。

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

在你的控制器中检查情况

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

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

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

还是……

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

当ng-class不能使用时(例如在样式化SVG时)，这工作得很好:

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

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-，我目前使用的是1.1.4)

我已经发表了一篇关于AngularJS+SVG的文章。它讨论了这个问题和许多其他问题。http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

还有一种(将来)有条件地应用样式的方法是有条件地创建有作用域的样式

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

</style>

但是现在只有FireFox支持范围样式。

Angular提供了许多内置指令，用于有条件地/动态地操纵CSS样式:

ng-class - use when the set of CSS styles is static/known ahead of time ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values. ng-show and ng-hide - use if you only need to show or hide something (modifies CSS) ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM) ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM) ng-disabled and ng-readonly - use to restrict form element behavior ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

正常的“Angular方式”包括将模型/作用域属性绑定到接受用户输入/操作的UI元素上(即使用ng-model)，然后将该模型属性关联到上面提到的内置指令之一。

当用户更改UI时，Angular会自动更新页面上的相关元素。

Q1听起来像是ng-class的一个很好的例子——CSS样式可以在类中捕获。

ng类接受一个“表达式”，该表达式必须求值为以下其中之一:

用空格分隔的类名字符串 类名数组 类名到布尔值的映射/对象

假设你的项目是使用ng-repeat在一些数组模型上显示的，并且当项目的复选框被选中时，你想应用pending-delete类:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

上面，我们使用ng-class表达式类型#3 -类名到布尔值的映射/对象。

Q2听起来像是ng-style的一个好例子——CSS样式是动态的，所以我们不能为此定义一个类。

Ng-style接受一个必须求值为的“表达式”:

CSS样式名称到CSS值的映射/对象

举一个人为的例子，假设用户可以在文本框中输入一个颜色名称作为背景色(jQuery的颜色选择器会更好):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

为以上两种乐器演奏小提琴。

小提琴也包含了ng-show和ng-hide的例子。如果选中复选框，除了背景颜色变为粉红色之外，还会显示一些文本。如果在文本框中输入'red'，则会隐藏一个div。