Angular实现调色板_andlua调色板-CSDN博客

本文链接：https://blog.csdn.net/qq_36818627/article/details/82344284

涉及到的技术栈：函数调用，双向数据绑定和H5的新标签的使用。

代码如下：

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<title>调色板</title>
		<script type="text/javascript" src="../js/angular.js" ></script>
		<style>
			.bigbox{
				width: 500px;
				margin: 0 auto;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid #333;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body ng-controller="MainCtrl as mainctrl">
		<div class="bigbox">
		<div class="box" ng-style="mainctrl.getColor()">Hello Angular</div>
		<p>
			R:
			<input type="range" min="0" max="255" ng-model="mainctrl.r"/>
			<input  type="number" min="0" max="255" ng-model="mainctrl.r"/>
		</p>
		<p>
			G:
			<input type="range" min="0" max="255" ng-model="mainctrl.g"/>
			<input  type="number" min="0" max="255" ng-model="mainctrl.g"/>
		</p>
		<p>
			B:
			<input type="range" min="0" max="255" ng-model="mainctrl.b"/>
			<input  type="number" min="0" max="255" ng-model="mainctrl.b"/>
		</p>
		<script>
			var myapp = angular.module("myapp",[]);
			myapp.controller("MainCtrl",[function(){
				this.r = 88;
				this.g = 88;
				this.b = 88;
				// 由于使用了变量，这里必须使用函数实现
				this.getColor = function(){
					return {"background-color":"rgb("+this.r+","+this.g+","+this.b+")"};
				}
				
			}]);
			
		</script>
		</div>
	</body>
</html>

效果如下：