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

最新推荐文章于 2022-06-22 15:27:15 发布

小猫儿

最新推荐文章于 2022-06-22 15:27:15 发布

阅读量1.3w

点赞数 1

分类专栏： AngularJs

AngularJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ng-calss的几种使用方法。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <script src="js/angular.min.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 = angular.module('my-app',[]);  
            app.controller('frist',function($scope){  
                    $scope.tempClass = 'green';  
                    $scope.bClass = "{'red':true,'green':false}"  
                    $scope.num = true;  
                      
            })  
        </script>  
    </body>  
</html>