AngularJS ng-class

来源:互联网 发布:身体除湿 知乎 编辑:程序博客网 时间:2024/04/29 02:09

test.html 页面

<!DOCTYPE html><html ng-app><head><title>Angular.js</title><style type="text/css">.warning{background-color: yellow;}.error{background-color: red;}</style><script type="text/javascript" src="angular-1.3.0.js"> </script><script type="text/javascript" src="test.js"></script></head><body><div ng-controller="WEController"><div ng-class="{error:isError,warning:isWarning}">{{messagetext}}</div><button ng-click="error()">showError</button><button ng-click="warn()">showWarn</button></div></body></html> 

test.js

function WEController($scope){$scope.isError = false;$scope.isWarning = false;$scope.warn = function(){$scope.messagetext = "this is warning text";$scope.isWarning = true;$scope.isError = false;};$scope.error = function(){$scope.messagetext = "this is error text";$scope.isWarning = false;$scope.isError = true;}}
初始画面


点击showError



点击showWarn



0 0
原创粉丝点击