AngularJS ng-class

时间：2015-02-28 16:33:45 阅读：145 评论：0 收藏：0 [点我收藏+]

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;
	}
}

初始画面

技术分享