AngularJS ng-class

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

技术分享

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。