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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。