angular.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!doctype html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>Angular</title>
  6. <meta name="viewport" content="width=device-width"/>
  7. <link rel="stylesheet" href="style.css"/>
  8. </head>
  9. <body>
  10. <ul>
  11. <li><a href="index.html">Vanilla JS</a></li>
  12. <li><a href="jquery.html">jQuery plugin</a></li>
  13. <li><a href="angular.html" class="active">Angular module</a></li>
  14. <li><a href="requirejs.html">RequireJS module</a></li>
  15. </ul>
  16. <div class="angular" ng-controller="chartCtrl">
  17. <span class="chart" easypiechart ng-init="options = { animate:false, barColor:'#E67E22', scaleColor:false, lineWidth:3, lineCap:'butt' }" percent="percent" options="options">
  18. <span class="percent" ng-bind="percent"></span>
  19. </span>
  20. <input type="range" min="-100" max="100" step="1" ng-model="percent" />
  21. <span class="chart" easypiechart percent="anotherPercent" options="anotherOptions">
  22. <span class="percent" ng-bind="percent"></span>
  23. </span>
  24. <input type="range" min="-100" max="100" step="1" ng-model="anotherPercent" />
  25. </div>
  26. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
  27. <script src="../dist/angular.easypiechart.min.js"></script>
  28. <script>
  29. var app = angular.module('app', ['easypiechart']);
  30. app.controller('chartCtrl', ['$scope', function ($scope) {
  31. $scope.percent = 65;
  32. $scope.anotherPercent = -45;
  33. $scope.anotherOptions = {
  34. animate:{
  35. duration:0,
  36. enabled:false
  37. },
  38. barColor:'#2C3E50',
  39. scaleColor:false,
  40. lineWidth:20,
  41. lineCap:'circle'
  42. };
  43. }]);
  44. </script>
  45. </body>
  46. </html>