AngularJS在一个ng-repeat中包含多个倒计时

AngularJS Multiple countdowns within an ng-repeat

本文关键字：ng-repeat 包含多 倒计时 一个 AngularJS      更新时间：2023-09-26

我有一个小的AngularJS应用程序，它搜索和检索用户列表和他们的下一个预定会议(假设一个是在接下来的8小时内安排的)从服务器带回使用JSON的时间格式在UTC为方便计算到当地时间。我已经写了javascript来计算剩余的时间，我没有写或弄清楚的是如何在Angular中做到这一点。

我想要完成的是能够在会议安排完成或会议开始之前的剩余时间内更新DOM。如果使用$timeout服务更新单个元素，似乎很简单，但是我不清楚如何在ng-repeat中一次对多个项目完成此任务。

任何想法都会很感激!谢谢!

在ng-repeat中，您将得到一个项目列表。

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

尝试只更新$作用域。并让每个项目都有一个timeUntil方法。您只需更新$作用域。从超时时间开始。Angular会处理剩下的部分。

这里的关键是要知道你只是放入了一个"表达式"，而在angular中，表达式可能很复杂，甚至涉及到函数调用。

重复问题，在这里回答:https://stackoverflow.com/a/16204830/2275421

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

预览

将HTML更改为引用一个不影响ng-repeat:

的单独数组。
<td>in {{_timeLeft[$index]}}</td>

更新如下:

$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);

注意，$scope.$apply()需要让Angular知道'_timeLeft'被修改了，它会更新所有对它的引用。

相关文章：