Change css style in a specific time without refresh the page

ionic-v1
1

I am a newbie of ionic 1 and angular JS 1, I would like to change a colour of an icon when a specific time is reached without refresh the page.

My current code is as below :

<button class="icon ion-ios-videocam" ng-style="iconstyle”>  </button>

var currentTime = Date();
var parsecurrenttime = Date.parse(currentTime);
if (parsecurrenttime >= parseTargetTime) {
$scope.iconstyle = {
color: '#e42112'
};
}

May I know is there any idea how to achieve it without refresh the page ?

Many thanks.

2

Angular does not know that a UI refresh is needed. Look into using $scope.apply() to do a refresh. Better yet, look at ng-class in the Angular docs to solve this

3

You can try using ng-class to solve this.

Example:
<button ng-class="currentTime > targetTime ? 'icon-style-one' : 'icon-style-two'">

<style>
.icon-style-one {
  color: green;
}
.icon-style-two {
  color: red;
}
</style>
4

As the currenttime keep going, how can I perform this condition once the target time is reached? I don’t want to refresh the page. Should I just setInterval() to keep checking ? or any better method, e.g. event controller?

Many thanks.

5

This is the way I would do it

Inside your controller, do whatever you do to increment your currentTime, it can be a setInterval function or just something you call every push of a button. This is a nice example of a setInterval function that fires an event - codepen link. So you’ll have $scope.currentTime incrementing and your $scope.targetTime.

On the view you’ll have the code I sent before, the ng-class will handle the condition and change the CSS whenever the $scope.currentTime >= $scope.targetTime.

So, let the controller handle the increment of variables and the ng-class handles the css change after condition is true.

Hope it works.

1 Like