Angular--小小调色板
<!DOCTYPE html>
<html lang="en" ng-app="app"><!-- 引入控制程序 -->
<head>
<meta charset="UTF-8">
<title>双向数据绑定--调色板</title>
<script src="angular.min.js"></script>
</head>
<body>
<!-- 实例化控制器，格式：类名-as-实例名 -->
<div ng-controller="MainCtrl as mainCtrl" ng-style="mainCtrl.render();">
<h3>小小调色板</h3>
<p>
<input type="range" min="0" max="255" ng-model="mainCtrl.R">
<input type="number" min="0" max="255" ng-model="mainCtrl.R">
R:{{mainCtrl.R}}
</p>
<p>
<input type="range" min="0" max="255" ng-model="mainCtrl.G">
<input type="number" min="0" max="255" ng-model="mainCtrl.G">
G:{{mainCtrl.G}}
</p>
<p>
<input type="range" min="0" max="255" ng-model="mainCtrl.B">
<input type="number" min="0" max="255" ng-model="mainCtrl.B">
B:{{mainCtrl.B}}
</p>
<p>
<input type="range" min="0" max="1" step="0.01" ng-model="mainCtrl.A">
<input type="number" min="0" max="1" step="0.01" ng-model="mainCtrl.A">
A:{{mainCtrl.A}}
</p>
</div>
<script>
var app=angular.module("app",[])//定义控制程序，用ng-app指令引用
app.controller("MainCtrl",[function(){//定义控制器，用ng-controller指令引用
//定义属性RGBA
this.R=111;
this.G=204;
this.B=200;
this.A=1;
//定义函数render
this.render=function(){
return {
"background-color":"rgba("+this.R+","+this.G+","+this.B+","+this.A+")",
"width":"400px",
"margin":"100px auto",
"text-align":"center",
"height":"280px"
};
}
}])
</script>
</body>
</html>
- ng-style也是angular内置指令，用来获取样式
![【angular】环境搭建及遇到的问题[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)