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

时间 2019-12-08

标签 angular class 几种经常使用方式栏目 AngularJS 繁體版

原文原文链接

ng-calss的几种使用方法。javascript

<!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>

第二种：经过字符串数组的形式来改变css

function changeClass(){
  $scope.className = true/false;
}
 
<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

实现很简单，就是当className为真的时候class为zhende，相反则为jiade。html

可是有一点很差的只可以让一个元素拥有两种状态，虽然这么说！基本也是知足所需了，我通常都用这个。简单、直观！java

第三种：经过key/value的方式数组

实现方式：app

function changeClass(){
  $scope.lala = true;
}
 
<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

当lala为true的时候，class则为haha，我的认为这个是比较推荐的，能够弥补第二种方式的点点遗憾~code