<!DOCTYPE html>
<html>
<head>
<!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link data-require="font-awesome@*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<!-- apiCheck is used by formly to validate its api -->
<script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- This is the latest version of formly core. -->
<script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" data-ng-controller="myController">
<div id="timer-container">
<ul>
<li ng-repeat="item in data">
<h1>{{item.title}}</h1>
<time value="item.time"></time>
</li>
</ul>
</div>
<br>
<a class="btn btn-default" data-ng-click="addTime()">Add Timer</a>
</div>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $compile, $http, $timeout) {
$scope.data = [
{title: "Time 1", time: 150},
{title: "Time 2", time: 125},
];
$scope.template;
$http.get('time.html').then(function(res){
$scope.template = res.data;
});
$scope.addTime = function (){
$scope.data.push({
title: "Time " + ( $scope.data.length + 1),
time: 100
})
}
});
app.filter('hourMinFilter', function () {
return function (value, max) {
if (value == max) return 'All';
var h = parseInt(value / 60);
var m = parseInt(value % 60);
var hStr = (h > 0) ? h + 'hr' : '';
var mStr = (m > 0) ? m + 'min' : '';
var glue = (hStr && mStr) ? ' ' : '';
return hStr + glue + mStr;
};
});
app.filter('timeFilter', function () {
return function (value, max) {
if (value == max) return 'All';
var h = parseInt(value / 60);
var m = parseInt(value % 60);
var hStr = (h > 0) ? h >= 10 ? h : '0' + h : '00';
var mStr = (m > 0) ? m >= 10 ? m : '0' + m : '00';
var glue = (hStr && mStr) ? ':' : '';
return hStr + glue + mStr;
};
});
app.directive('time', function () {
return {
templateUrl: 'time.html',
restrict: 'E',
scope: {
Time: '=value'
},
link: function (scope, element, attrs) {
element.addClass('time');
// $compile(element)(scope);
}
};
});
/* Styles go here */
<br>
<span class="time">{{ Time | timeFilter }}</span>
<div class="btn-group btn-group-sm">
<button class="btn btn-default" ng-click="Time = Time + 1">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default" ng-click="Time = Time - 1">
<i class="fa fa-caret-down"></i>
</button>
</div>
<br>