AngularJS ng-class用法

ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name。
ng-class在实际的应用场景中还是比较灵活的，而在AngularJS中一般有三种方式给元素的class属性做一些门道

scope变量绑定（不推荐使用）

<body ng-app="app" ng-controller="ctrl1">
    <style type="text/css">
        .redFont{color: red;}
    </style>
    <div class="{{test}}">红字</div>
    <script>
        var app=angular.module('app',[]);
        app.controller('ctrl1',function($scope){
            $scope.test="redFont";
        });
    </script>
</body>

说明
这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了className是不是有点诡异，我们希望的controller是一个干净的纯javascript意义的object。

字符串数组形式

<body ng-app="app" ng-controller="ctrl1">
    <style type="text/css">
        .redFont{color: red;}
        .blueFont{color: blue;}
    </style>
    <div ng-class="{true: 'redFont', false: 'blueFont'}[isActive]">字体颜色</div>
    <script>
        var app=angular.module('app',[]);
        app.controller('ctrl1',function($scope){
            $scope.isActive=true;
            // $scope.isActive=false;
        });
    </script>
</body>

说明
其结果是2中组合，isActive表达式为true，则 redFont，否则blueFont。

对象key/value处理

<body ng-app="app" ng-controller="ctrl1">
    <style type="text/css">
        .redFont{color: red;}
        .blueBg{background-color: blue;}
    </style>
    <div ng-class="{'redFont': isRedFont, 'blueBg': isBlueBg}">文字颜色、背景颜色</div>
    <script>
        var app=angular.module('app',[]);
        app.controller('ctrl1',function($scope){
            $scope.isRedFont=true;
            $scope.isBlueBg=true;
        });
    </script>
</body>