ng-dial
ng-dial copied to clipboard
A interactive dial directive for Angular.js
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
- eithertrue
orfalse
. Default:false
-
startAngle
-0-360
. Default:0
-
endAngle
-0-360
. Default:360
-
innerRadius
- An integer. Default:60
-
outerRadius
- An integer. Default:100
-
clickable
- eithertrue
orfalse
. Default:true
Usage
In order to use in your project you will need to:
- include
dial.js
as one of your source files e.g<script src="js/dial.js">
- include
dial.css
for styling e.g.<link rel="stylesheet" href="css/dial.css" type="text/css">
- include
gmd.dial
as a dependency of your Angular app e.g.var app = angular.module('dialExampleApp', ['gmd.dialplot']);
- 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.