Question

我尝试制作一组计时器，当页面加载每个计时器时可能会有不同的剩余时间。我有以下指令，但并不完全。属性＆＃34; counter＆＃34;并不允许定时器保持范围，即它们都在它们滴答时同时保持开始。如何编辑以下代码以实现此目的？

var app = angular.module('app', []);
    app.controller('TimerController', function($scope, $http) {

        $scope.timers = function() {
            $http.get('/timers').
            then(function(response) {
                $scope.timers = response.data.results
            }, function(response) {});
        }

        $scope.Math = window.Math;

    }).directive('timer', function() {

        template_string = '<h5>{{Math.floor(counter/60)}} minutes {{counter-Math.floor(counter/60)*60}} seconds</h5>'

        return {
            restrict: 'E',
            template: template_string,
            controller: function($scope, $timeout, $attrs) {
                $scope.counter = parseInt($attrs.counter, 10) || 3600
                var callback = function() {
                    $scope.done = ($scope.counter <= 0) ? true : false;
                    ($scope.done) ? $scope.counter++: $scope.counter--;
                    $timeout(callback, 1000);
                };

                $timeout(callback, 1000);
            }
        };
    });

<body ng-controller="TimerController">
    <div class="container">
        <div ng-repeat="timer in timers track by $index">
        </div>
        <timer counter="1000"></timer> <!-- these start at different times -->
        <timer counter="500"></timer> <!-- on page load they both have 1000-->
    </div>
</body>

如何创建一组在不同时间开始的计时器

0 个答案: