1 <!DOCTYPE html>
2 <html ng-app="myapp">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
7 <style type="text/css">
8 .box{
9 width: 200px;
10 height: 200px;
11 border: solid 1px #333;
12 }
13 </style>
14 </head>
15 <body ng-controller="MainCtrl as mainctrl">
16 <div class="box" ng-style="mainctrl.getColor()"></div>
17 <p>
18 r:
19 <input type="range" min="0" max="255" ng-model="mainctrl.r" />
20 <input type="text" ng-model="mainctrl.r"/>
21 </p>
22 <p>
23 g:
24 <input type="range" min="0" max="255" ng-model="mainctrl.g" />
25 <input type="text" ng-model="mainctrl.g" />
26 </p>
27 <p>
28 b:
29 <input type="range" min="0" max="255" ng-model="mainctrl.b" />
30 <input type="text" ng-model="mainctrl.b" />
31 </p>
32 <script type="text/javascript">
33 var myapp = angular.module("myapp",[]);
34
35 myapp.controller("MainCtrl",[function(){
36 this.r = 88;
37 this.g = 88;
38 this.b = 88;
39 this.getColor = function(){
40 return {"background-color":"rgb(" + this.r + "," + this.g + "," + this.b +")"};
41 }
42 }]);
43 </script>
44 </body>
45 </html>
