[TOC] # Angular处理样式【ng-class】 在Angular中，添加元素的样式也非常简单，概括起来可以通过下列几种方式来进行。 ## 直接绑定值 直接绑定值为CSS类别名称的$scope对象属性这种方式的操作非常简单，先在控制器中添加一个值为CSS类别名称的属性，然后在页面元素的ng-class属性值中，绑定属性名即可，这种方式操作起来虽然简单，但在控制器中定义CSS类别名称，并不是Angular所提倡的，我们在开发Angular应用时，尽量保证控制器的代码都是处理业务逻辑，并不涉及页面元素。 ~~~html <p ng-class="style1">Using Array Syntax</p> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> ~~~ ## 以字符串数组方式选择性添加CSS类别 以字符串数组方式选择性添加CSS类别名称这种方式将根据控制器中一个布尔类型的属性值来决定页面中元素添加的CSS样式名，当该属性值为true时，添加一个CSS样式名，当属性值为false值时，添加另外一个CSS样式名。 ~~~html <div ng-class="{true:'red',false:’green’}[blnfocus]"></div> ~~~ 在上述代码中，`<div>`的CSS样式取决于“blnfocus”属性值，当该值为true时，添加“red”样式名，当该值为false时，添加“green”样式名。这种方式只能在两种样式中选择一种，并且{}和[]顺序不可颠倒。在{}中设置可选择的两种样式名称，在[]中放置控制样式的属性名。 ## 通过定义key/value对象的方式来添加多个CSS类别 通过定义key/value对象的方式来添加多个CSS类别名称与前面介绍的两种添加CSS类别名的方法相比，第三种方法的功能要强大很多，它可以根据控制显示样式的属性值添加多个样式名。例如，先添加两个用于控制样式显示的“a”和“b”属性，这两个属性的类型均为布尔型，代码如下。 $scope.a=false; $scope.b=true; 接下来在页面的<div>元素中，添加ng-class属性。在设置属性值时，通过定义key/value对象的方式来添加多个CSS样式名，代码如下。 `<div ng-class="{'red':a ,'green':b}"></div>` 在上述ng-class属性值设置过程中，样式名“red”和“green”分别为“key”值，属性值“a”和“b”分别为对应的“value”值。当“value”属性值为true时，则添加对应的“key”即CSS样式名。因此，这种方式可以实现添加多种CSS样式名称，适合在处理复杂样式时使用。此外，在Angular中，还有另外两个用于添加样式的页面指令，分别为“ng-class-odd”和“ng-class-even”，这两个样式指令是专用于以列表方式显示数据，对应奇数行与偶数行的样式。