i trying create count down timer angularjs , $interval service.
i have created way show time , have successful countdown starting 25 minutes going down 0.
however finding difficult activate $interval inside function scope? in other words trying use $interval when call function stores it.
in code snippet, timer starts when page loads.
<html> <head> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script><!-- angularjs --> <script> var myapp = angular.module('myapp', []); myapp.controller('timer',['$scope', '$interval', function($scope, $interval){ $scope.starttime = 1500000; // 25min in ms $scope.format = 'mm:ss'; //minutes , seconds format $interval(function(){ $scope.starttime; $scope.starttime -=1000; //starttime equal starttime - 1 second /*if($scope.starttime === 0){ $scope.starttime = 1500000; } */ },1000); //return start; //}; //end starttimer function $scope.killtimer = function(){ } }]); </script> </head> <body ng-app="myapp"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1 ng-controller="timer">{{ starttime | date:format}}</h1> <!-- start time format filter --> <button class="btn btn-primary" ng-click="starttimer()">start</button> <button class="btn btn-danger" ng-click="killtimer()">end timer</button> </div> </div> </div> </body> </html> however want wrap $interval inside $scope.starttimer function can call ng-click , button on dom. here unsuccessful attempt @ version.
<html> <head> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script><!-- angularjs --> <script> var myapp = angular.module('myapp', []); myapp.controller('timer',['$scope', '$interval', function($scope, $interval){ $scope.starttime = 1500000; // 25min in ms $scope.format = 'mm:ss'; //minutes , seconds format $scope.starttimer = function($scope){ $interval(function(){ $scope.starttime; $scope.starttime -=1000; //starttime equal starttime - 1 second /*if($scope.starttime === 0){ $scope.starttime = 1500000; } */ },1000); //return start; //}; //end starttimer function $scope.killtimer = function(){ } }]); </script> </head> <body ng-app="myapp"> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1 ng-controller="timer">{{ starttime | date:format}}</h1> <!-- start time format filter --> <button class="btn btn-primary" ng-click="starttimer()">start</button> <button class="btn btn-danger" ng-click="killtimer()">end timer</button> </div> </div> </div> </body> </html> this version doesn't work. angularjs breaks!!?? not sure why.
here link plnkr
several problems:
the main 1 button not in scope of controller. put ng-controller on heading tag. move ng-controller higher level includes button.
missing closing brace }
remove $scope.starttime; inside interval
Comments
Post a Comment