如何有条件地在AngularJS中应用CSS样式？

> ng-class – 当一组CSS样式是静态/提前知道时使用
> ng-style – 当您无法定义CSS类时使用，因为样式值可能会动态更改。认为可编程控制的风格值。
> ng-show和ng-hide – 如果您只需要显示或隐藏某些东西(修改CSS)
> ng-if – 在1.1.5版本中，如果你只需要检查单个条件(修改DOM)，使用更详细的ng-switch，
> ng-switch – 使用而不是使用几个互斥的ng显示(修改DOM)
> ng-disabled和ng-readonly – 用于限制表单元素行为
> ng-animate – 新的版本1.1.4，用于添加CSS3过渡/动画

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

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

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

ng-class接受必须求值为以下之一的“表达式”：

>一个以空格分隔的类名称的字符串
>一个类名数组
>类名的映射/对象到布尔值

假设您的项目是使用ng-repeat显示在一些数组模型上，并且当一个项目的复选框被选中，你想应用待删除类：

<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类表达式类型#3 – 类名称的映射/对象到布尔值。

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

ng-style接受一个“表达式”，必须求值为：

> CSS样式名称到CSS值的地图/对象

对于一个有用的示例，假设用户可以在背景颜色的texbox中输入颜色名称(jQuery颜色选择器会更好)：

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

Fiddle为上述两者。

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