I am using angular-timer.
This particular code snippet works fine:
{{ (seconds / 10) * 100 }}
But when I try this one, it doesn't work as expected:
{{ (seconds / secondsToAnswer ) * 100 }
(it gives NaN as the result)
Even though I have defined secondsToAnswer as 10 in the controller: $scope.secondsToAnswer = 10;
This issue persists outside the directive too.
Here is the full code for reference:
HTML
<timer interval="1000">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
style="width: {{ (seconds / secondsToAnswer) * 100 }}%">
</div>
</div>
</timer>
JS
'use strict';
vocabApp.controller('PracticeController', function ($scope) {
$scope.expressions = [
{ expression:'cat', meaning:'macska' },
{ expression:'dog', meaning:'kutya' },
{ expression:'whale', meaning:'bálna' }
];
//$scope.timerRunning = true;
$scope.startTimer = function () {
$scope.secondsToAnswer = 10;
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function () {
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, args) {
console.log('timer-stopped args = ', args);
});
})