12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <!doctype html>
- <html lang="en" ng-app="app">
- <head>
- <meta charset="UTF-8"/>
- <title>Angular</title>
- <meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" href="style.css"/>
- </head>
- <body>
- <ul>
- <li><a href="index.html">Vanilla JS</a></li>
- <li><a href="jquery.html">jQuery plugin</a></li>
- <li><a href="angular.html" class="active">Angular module</a></li>
- <li><a href="requirejs.html">RequireJS module</a></li>
- </ul>
- <div class="angular" ng-controller="chartCtrl">
- <span class="chart" easypiechart ng-init="options = { animate:false, barColor:'#E67E22', scaleColor:false, lineWidth:3, lineCap:'butt' }" percent="percent" options="options">
- <span class="percent" ng-bind="percent"></span>
- </span>
- <input type="range" min="-100" max="100" step="1" ng-model="percent" />
- <span class="chart" easypiechart percent="anotherPercent" options="anotherOptions">
- <span class="percent" ng-bind="percent"></span>
- </span>
- <input type="range" min="-100" max="100" step="1" ng-model="anotherPercent" />
- </div>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
- <script src="../dist/angular.easypiechart.min.js"></script>
- <script>
- var app = angular.module('app', ['easypiechart']);
- app.controller('chartCtrl', ['$scope', function ($scope) {
- $scope.percent = 65;
- $scope.anotherPercent = -45;
- $scope.anotherOptions = {
- animate:{
- duration:0,
- enabled:false
- },
- barColor:'#2C3E50',
- scaleColor:false,
- lineWidth:20,
- lineCap:'circle'
- };
- }]);
- </script>
- </body>
- </html>
|