angular中的ng-class的几种常用方式

时间:2025-04-25 08:07:18

ng-calss的几种使用方法。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <script src="js/"></script>  
        <style type="text/css">  
            .red{  
                width: 100px;  
                height: 100px;  
                background: red;  
            }  
            .green{  
                width: 100px; height: 100px;background: green;  
            }  
        </style>  
    </head>  
    <body>  
        <div ng-app="my-app">  
            <div ng-controller="frist">  
                <!--第一种  直接加变量-->  
                <div ng-class="tempClass"></div>  
                <!--第二种  用{{}} 包住的变量表达式-->  
                <div ng-class="{{bClass}}"></div>  
                <!--第三种-->  
                <div ng-class="{'red':num,'green':!num}"></div>  
                <!--第四种-->  
                <div ng-class="{true:'green',false:'red'}[num]"></div>  
            </div>  
              
        </div>  
          
        <script type="text/javascript">  
            var app = ('my-app',[]);  
            ('frist',function($scope){  
                    $ = 'green';  
                    $ = "{'red':true,'green':false}"  
                    $ = true;  
                      
            })  
        </script>  
    </body>  
</html>