Question

我正在尝试动态添加包含计时器的项目。现在，它只在添加新项目时更新计时器值。
如何更新每秒每个项目的计时器值？

HTML

   <div ng-repeat="item in items">
       ID:<label>{{item.id}}</label> </br>
       time:{{item.time}} 
    </div>
</div>

控制器

function MyCtrl($scope) {
    $scope.items = [];
    function random(min,max) {
        return Math.floor(Math.random()*(max-min+1)+min);
    }
    $scope.addItem = function () {
        var item = {};
        item.id = random(0,10);
        item.created = new Date();
        item.timer =  setInterval(function() {
                        var cur = new Date();
                        item.time = (cur.getTime() - item.created);
                      },1000); 
        $scope.items.push(item);        
    }
}

jsfiddle

Answer 1

你需要用$scope.$apply包装计时器的主体来通知AngularJS模型被更改并且它应该更新视图：

item.timer =  setInterval(function() {
   $scope.$apply(function(){
       var cur = new Date();
       item.time = (cur.getTime() - item.created);
   });
},1000);

DEMO

如何使用ng-repeat添加包含计时器功能的项目？

1 个答案: