<!DOCTYPE html>
<html ng-app="KnobDemoApp">
<head>
<link data-require="angular.js@1.5.3" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" />
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script data-require="d3js@3.5.14" data-semver="3.5.14" src="http://d3js.org/d3.v3.min.js"></script>
<script data-require="ng-knob@0.1.3" data-semver="0.1.3" src="https://rawgit.com/RadMie/ng-knob/master/dist/ng-knob.min.js"></script>
<script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="knobCtrl">
<p>{{endTime}} endTime</p>
<p>{{doomsday[0]}} years, {{doomsday[1]}} months, {{doomsday[2]}} days, {{doomsday[3]}} hours, {{doomsday[4]}} min, {{doomsday[5]}} sec</p>
<div>
<ui-knob value="doomsday[2]" options="daysOptions"></ui-knob>
</div>
<div>
<ui-knob value="doomsday[3]" options="hoursOptions"></ui-knob>
</div>
<div>
<ui-knob value="doomsday[4]" options="minutesOptions"></ui-knob>
</div>
<div>
<ui-knob value="doomsday[5]" options="secondsOptions"></ui-knob>
</div>
</body>
</html>
// Code goes here
var app = angular.module('KnobDemoApp', ['ui.knob']);
app.controller('knobCtrl', function ($scope, $interval) {
$scope.daysOptions = {
readOnly: true,
size: 136,
min: 0,
max: 365,
subText: {
enabled: true,
text: 'DAYS'
}
};
$scope.hoursOptions = {
readOnly: true,
size: 136,
min: 0,
max: 24,
subText: {
enabled: true,
text: 'HOURS'
}
};
$scope.minutesOptions = {
readOnly: true,
size: 136,
min: 0,
max: 60,
subText: {
enabled: true,
text: 'MIN'
}
};
$scope.secondsOptions = {
readOnly: true,
size: 136,
min: 0,
max: 60,
subText: {
enabled: true,
text: 'SEC'
}
};
$scope.endTime = moment('2016-06-30 10:00:00');
$scope.doomsday = [];
$interval(function() {
var diff = moment.duration( $scope.endTime.diff() );
$scope.doomsday[0] = diff._data.years;
$scope.doomsday[1] = diff._data.months;
$scope.doomsday[2] = diff._data.days;
$scope.doomsday[3] = diff._data.hours;
$scope.doomsday[4] = diff._data.minutes;
$scope.doomsday[5] = diff._data.seconds;
for ( var i = 0, c = $scope.doomsday.length; i < c; i++ )
if ( $scope.doomsday[i] < 10 )
$scope.doomsday[i] = '0' + $scope.doomsday[i];
}, 1000);
});
/* Styles go here */