angular [ng-class和ng-model]配对使用，切换背景颜色

最新推荐文章于 2022-09-22 22:02:34 发布

仰望星空的包子

最新推荐文章于 2022-09-22 22:02:34 发布

阅读量6.1k

点赞数

分类专栏： angularJS学习文章标签： angular js

本文链接：https://blog.youkuaiyun.com/sinat_21206105/article/details/53307940

版权

angularJS学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Angular中利用ng-class和ng-model指令配合，实现选择背景颜色后div元素颜色的动态切换，以此展示Angular简化代码的能力。

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

慢慢开始研究下js相关的一些框架，比如说angular.js.第一个学习的是ng-class实现切换背景颜色，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ng-class类选择</title>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<style type="text/css">
		.lightblue{width: 200px;height: 300px;background-color: lightblue;}
		.red{width: 200px;height: 300px;background-color: red;}
		.green{width: 200px;height: 300px;background-color: green;}
	</style>
</head>
<body>
	<div ng-app="">
		<select name="color" id="color" ng-model='home'>
			<option value="lightblue">天蓝色</option>
			<option value="red">红色</option>
			<option value="green">绿色</option>
		</select>
		<div ng-class="home">
			<h1>选择自己想要的颜色</h1>
			<p>瓦萨，好多颜色呢</p>
		</div>
	</div>
</body>
</html>

其实不难发现，使用angular可以简洁很多代码，也可以让大家偷个懒。

以下是用js写的实现选择背景颜色后div颜色切换的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript选择不同背景颜色，该div的背景颜色就改变！</title>
	<style type="text/css">
		.box{width: 200px;height: 200px;margin:10px;padding: 10px;}
	</style>
</head>
<body>
	<div class="container">
		<!-- 选择背景颜色select选项 -->
		<select name="color" id="color">
			<option value="red">红色</option>
			<option value="blue">蓝色</option>
			<option value="green">绿色</option>
		</select>
		<div class="box">
			<h1>我想改变自己的背景颜色</h1>
			<p>用js来实现背景颜色改变</p>
		</div>
	</div>
	<script type="text/javascript">
		// 获取select选中的value
		var sel=document.getElementById('color');
		var box=document.getElementsByClassName('box')[0];
		box.style.backgroundColor=sel.value;
		sel.οnchange=function(){
			box.style.backgroundColor=sel.value;
		}


	</script>
</body>
</html>

大家可以对比下，哪个比较容易！然后选择自己喜欢的方式来用哦！