An Angular.js Interactive Dial

An visual component for gathering user input when values sit in a range between 0-100. Find a demo here.

Originally a JSFiddle this has now been turned into a ready-to-use Angular.js directive.

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
• clickable- either true or false. Default: true

Usage

In order to use in your project you will need to:

1. include dial.js as one of your source files e.g <script src="js/dial.js">
2. include dial.css for styling e.g. <link rel="stylesheet" href="css/dial.css" type="text/css">
3. include gmd.dial as a dependency of your Angular app e.g. var app = angular.module('dialExampleApp', ['gmd.dialplot']);
4. include a dial inside a template <gmd-dial value="initialValue"></gmd-dial>

Setup Example

Clone the repository

git clone https://github.com/GordyD/ng-dial.git
cd ng-dial
npm install
bower install
node app.js

Go to http://localhost:3000 to see example radial plots.