AngularJS中ng-class使用方法

      一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。

ng-class是增加相关样式，可以和class同时使用

实现方法：

1、通过数据的双向绑定（通过$scope绑定）

<div class="{{className}}"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.className = "selected";
	}]);
</script>  

不推荐：查了下原由：“在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object”，因为controller $scope应该只有数据和行为。

2、通过对象数组绑定

<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.isSelected = true;  
	}]);
</script>  

当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观。

3、通过key/value键值对绑定：

<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>  

<script type="text/javascript">
	var myApp = angular.module('myApp', []);
	myApp.controller('validateCtrl', ['$scope', function($scope) {
		$scope.isA = true; //增加class="A"； 
	}]);
</script>  

当isA为true时，增加class="A"；当isB为true时，增加class="B"样式；当isC为true时，增加class="C"样式。