I am defining one countdown function but not output?
html, this is my code, here are the details. My goal is to implement a countdown function using an angle function.
var app = angular.module('myCountDown', []);
app.controller("Countdown",function($scope){
$scope.start = function(){
var temp = $scope.inputValue;
setInterval(function(){
if(temp<1){
return ;
}
temp -= 1;
$scope.count = temp;
console.log($scope.count);
},1000);
}
})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myCountDown">
<div ng-controller="Countdown">
<input type="text" ng-model="inputValue">
<button ng-click="start()">开始</button>
<input type="text" ng-model="count">
</div>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
I am printing the result to the console, but not outputting to the web page.
Thank you!
source to share
Use $ scope. $ apply () to see your changes OR use which is recommended for angular instead . $interval
setTimeout
DEMO
var app = angular.module('myCountDown', []);
app.controller("Countdown", function($scope, $interval) {
$scope.start = function() {
var temp = $scope.inputValue;
$interval(function() {
if (temp < 1) {
return;
}
temp -= 1;
$scope.count = temp;
console.log($scope.count);
}, 1000);
}
})
<!doctype html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myCountDown">
<div ng-controller="Countdown">
<h1> {{count}}</h1>
<input type="text" ng-model="inputValue">
<button ng-click="start()">开始</button>
{{count}}
<input type="text" ng-model="count">
</div>
</body>
</html>
source to share
setInterval
will end with angular scope. you can use $interval
. also remember to clear the previous interval
one before creating a new one.
see below example.
var app = angular.module('myCountDown', []);
app.controller("Countdown", function($scope, $interval) {
$scope.start = function() {
var temp = $scope.inputValue;
if ($scope.sampleInterval) {
$interval.cancel($scope.sampleInterval);
}
$scope.sampleInterval = $interval(function() {
if (temp < 1) {
return;
}
temp -= 1;
$scope.count = temp;
console.log($scope.count);
}, 1000);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myCountDown" ng-app="myCountDown">
<div ng-controller="Countdown">
<input type="text" ng-model="inputValue">
<button ng-click="start()">开始</button>
<input type="text" ng-model="count">
</div>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</div>
source to share
I know how to fix this problem. we can change the js file.
var app = angular.module('myCountDown', []);
app.controller("Countdown",function($scope){
$scope.start = function(){
var temp = $scope.inputValue;
setInterval(function(){
if(temp<1){
return ;
}
temp -= 1;
$scope.count = temp;
$scope.$apply();
console.log($scope.count);
},1000);
}
})
source to share