1、方法一 通过数据的双向绑定(不推荐)
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .sky { color:white; background-color:lightblue; padding:20px; } .tomato { background-color:coral; padding:40px; } </style> </head> <body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" /> <input type="button" value="番茄色" ng-click="clickEvent2()" /> <div class="{{class1}}"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var myApp = angular.module('myApp',[]); myApp.controller('ctrl', function($scope){ $scope.clickEvent1 = function() { $scope.class1 = "sky"; } $scope.clickEvent2 = function() { $scope.class1 = "tomato"; } }); </script> </body> </html>
2、方法二 对象数组
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .sky { color:white; background-color:lightblue; padding:20px; } .tomato { background-color:coral; padding:40px; } </style> </head> <body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" /> <input type="button" value="番茄色" ng-click="clickEvent2()" /> <div ng-class="{'class1':'sky','class2':'tomato'}[inputClass]"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var myApp = angular.module('myApp',[]); myApp.controller('ctrl', function($scope){ $scope.clickEvent1 = function() { $scope.inputClass = 'class1'; } $scope.clickEvent2 = function() { $scope.inputClass = 'class2'; } }); </script> </body> </html>
3、方法三 对象key/value
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .sky { color:white; background-color:lightblue; padding:20px; } .tomato { background-color:coral; padding:40px; } </style> </head> <body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" /> <input type="button" value="番茄色" ng-click="clickEvent2()" /> <div ng-class="{'sky':sky,'tomato':tomato}"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var myApp = angular.module('myApp',[]); myApp.controller('ctrl', function($scope){ $scope.clickEvent1 = function() { $scope.sky = true; $scope.tomato = false; } $scope.clickEvent2 = function() { $scope.sky = false; $scope.tomato = true; } }); </script> </body> </html>