An Angular.js directive for an interactive dial component powered by D3.js. Written by the team at Workshape.io.
2-way data binding
Value: {{initialValue}}
Firebase powered (will be updated by other user's changes)
Features
- interactive
- animated
- shows previous value
- 2-way data binding (will respond to changes to model and update model accordingly)
Parameters
- value
- animate - either true or false. Default: false
- startAngle - 0-360. Default: 0
- endAngle - 0-360. Default: 360
- innerRadius - An integer. Default: 60
- outerRadius - An integer. Default: 100
Code Sample
HTML
<ng-dial value="initialValue" animate="true"></ng-dial>
<ng-dial value="initialValue" start-angle="10" end-angle="340" animate="true"></ng-dial>
<ng-dial value="initialValue" start-angle="90" end-angle="180" animate="true"></ng-dial>
<ng-dial value="initialValue" inner-radius="70" outerRadius="120" animate="true"></ng-dial>
Angular.js
var app = angular.module('dialExampleApp', ['ui.dial']);
app.controller('dialCtrl', function($scope) {
$scope.initialValue = 28;
});