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

最新推荐文章于 2021-12-15 12:22:24 发布

仰望星空的包子

最新推荐文章于 2021-12-15 12:22:24 发布

阅读量6.1k

点赞数

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

本文链接：https://blog.csdn.net/sinat_21206105/article/details/53307940

版权

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

摘要由CSDN通过智能技术生成

慢慢开始研究下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