Angular 数据绑定调色板 

 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>

 

posted @ 2017-08-18 13:22  wǒの湁茡潞釦﹌  阅读(223)  评论(0)    收藏  举报