<!doctype html> <html ng-app="firstApp"> <head> <meta charset="utf-8"> <script src="angular-1.3.0.js"></script> </head> <body> <style> .it{color:#ff7300;margin:10px;} .curr{background: #006600;} .fs18{font-size:30px;} .pd20{padding:20px;background:#26a3db;} </style> <pre> 1.字符串數組形式。 < div ng-class="{true: 'active', false: 'inactive'}[isActive]">< /div> 相當於對這個求值：({true: 'active', false: 'inactive'})[false] ({true: 'active', false: 'inactive'})[true] 即 var ct={true: 'active', false: 'inactive'}; ct[true]或ct[false]得到值為'active'或 'inactive' 2.scope變量綁定，（不推薦使用） $scope.test =“classname”; < div class=”{{test}}”>< /div> 3. 象key/value方式，處理class混合 < div ng-class="{'selected': isSelected, 'car': isCar}">< /div> </pre> <div ng-controller="cartController"> <div class="it {{test}}">scope變量綁定</div> <div class="it" ng-click="selM()" ng-class="{true: 'curr', false: ''}[isActive]">字符串數組形式，單擊</div> <div class="it" ng-class="{'fs18': isFs, 'pd20':isPd }" ng-click="selM3()">對象key/value方式，處理class混合..將應用it fs18 pd20 。其中it是默認的</div> </div> <script> var app=angular.module('firstApp',[]);//app模塊名 app.controller('cartController',function($scope){ $scope.test='curr';//直接方式。 $scope.isActive=false; $scope.selM=function(){ $scope.isActive=true; console.log('當前選中否',$scope.isActive) } //第3種方式 $scope.isFs=false; $scope.isPd=false; $scope.selM3=function(){ $scope.isFs=true; $scope.isPd=true; } }); </script> </body> </html>