2013-04-24 85 views
1

我有一個小AngularJS應用程序,其搜索和檢索用戶的列表和他們的下次例會(假設一個計劃在未來8小時)使用JSON與服務器帶回時間格式爲UTC,便於計算到當地時間。我寫的JavaScript能夠計算剩餘的時間,我沒有寫或想出的是如何在Angular中做到這一點。AngularJS多倒計時

我想什麼做到的是能夠與剩餘時間安排會議已完成或離開時間,直到會議開始更新DOM。如果使用$ timeout服務更新單個元素似乎很簡單,但我不清楚如何在一次ng-repeat內完成多個項目的ng任務。

任何想法,將不勝感激!謝謝!

回答

2

在ng-repeat中,您將獲得一個項目列表。

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

嘗試只更新$ scope.currentTime並讓每個項目都有timeUntil方法。您只需從超時時間更新$ scope.currentTime。 Angular會處理剩下的事情。

這裏的關鍵是知道你只是在「表達」,並在角推杆,一個表達式可以是複雜的,甚至累及一個函數調用。

+0

這將完美工作,只需要在更新上設置$超時,它應該按我的意願工作。沒有意識到你可以在ng-repeat指令中添加控制器的功能。謝謝! – Brian 2013-04-24 19:29:00

2

重複的問題,回答了在這裏:https://stackoverflow.com/a/16204830/2275421

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

改變了HTML來指代一個單獨的數組不影響NG-重複:

<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'已被修改,它會更新對它的所有引用。