AngularJS Multiple countdowns within an ng-repeat

Question

I have a small AngularJS app which searches and retrieves a listing of users and their next scheduled meeting (assuming one is scheduled in the next 8 hours) brought back from the server using JSON with the time format in UTC for ease of calculation to local times. I have the javascript written to be able to calculate the time remaining, what I do not have written or figured out is how to do this within Angular.

What I would like to accomplish is to be able to update the DOM with time remaining until the meeting scheduled has completed or time left until the meeting starts. It seems straight forward if updating a single element using the $timeout service, however I am not clear on how to accomplish this task within an ng-repeat for several items at a time.

Any ideas would be appreciated! Thanks!

MattK · Accepted Answer · 2013-04-24 19:20:33Z

2

in the ng-repeat, you'll have a list of items.

<li ng-repeat="items" >{{ timeUntil(currentTime) }}</li>

Try updating just the $scope.currentTime and letting each item have a timeUntil method. You'll just update the $scope.currentTime from your timeout. Angular will handle the rest.

The key thing here is knowing that you are just putting in an "expression" and in angular, an expression can be complex,even involving a function call.

answered Apr 24, 2013 at 19:20

MattK

1,5411 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

This will work perfectly, just need to set a $timeout on the update and it should work as I want it to. Didn't realize you can add functions from the controller within the ng-repeat directive. Thanks!

Community · Accepted Answer · 2017-05-23 12:07:52Z

2

duplicate question, answered here: https://stackoverflow.com/a/16204830/2275421

http://plnkr.co/edit/0JqK96irV4ETdWZYxO3P?p=preview

changed the html to refer to a separate array that doesn't affect ng-repeat:

<td>in {{_timeLeft[$index]}}</td>

which is updated as follows:

$scope._timeLeft = [];

var intervalID = window.setInterval(function() {
    for (var i=0; i<$scope.items.length; i++) {
      $scope._timeLeft[i] = $scope.timeUntil($scope.items[i]._freeBusyTime);
    }
    $scope.$apply();
}, 1000);

Note that $scope.$apply() is required to let Angular know that '_timeLeft' has been modified, which updates all references to it.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Apr 25, 2013 at 5:26

Joseph Oster

5,5651 gold badge22 silver badges11 bronze badges

Collectives™ on Stack Overflow

AngularJS Multiple countdowns within an ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related