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=)