AngularJS ng-class

最新推荐文章于 2023-03-15 15:16:45 发布

Bo年再无木小白

最新推荐文章于 2023-03-15 15:16:45 发布

阅读量1.1k

点赞数

分类专栏： AngularJS 文章标签： AngularJs

本文链接：https://blog.youkuaiyun.com/u012079603/article/details/43984989

版权

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现动态样式的示例项目。通过定义控制器中的变量来控制元素的样式类，从而达到显示警告或错误信息的效果。示例中包含了一个简单的HTML页面和JavaScript代码，展示了如何根据不同条件更改元素背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

初始画面