Angular 提供了许多用于有条件/动态地操作 CSS 样式的内置指令：

• ng-class - 当 CSS 样式集是静态的/提前知道时使用
• ng-style - 当您无法定义 CSS 类时使用，因为样式值可能会动态变化。想想样式值的可编程控制。
• ng-show 和 ng-hide - 如果您只需要显示或隐藏某些内容（修改 CSS），请使用
• ng-if - 1.1.5 版中的新增功能，如果您只需要检查单个条件（修改 DOM），请使用而不是更详细的 ng-switch
• ng-switch - 使用而不是使用几个互斥的 ng-shows（修改 DOM）
• ng-disabled 和 ng-readonly - 用于限制表单元素的行为
• ng-animate - 1.1.4 版中的新功能，用于添加 CSS3 过渡/动画

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

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

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

ng-class 接受一个“表达式”，它必须计算为以下之一：

1. 一串以空格分隔的类名
2. 类名数组
3. 类名到布尔值的映射/对象

假设使用某些阵列模型使用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 接受一个“表达式”，它必须计算为：

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

对于一个人为的例子，假设用户可以在背景颜色的 texbox 中输入颜色名称（jQuery 颜色选择器会更好）：

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

为上述两个
jsfiddle

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