Question

我想用角度js编写时间跟踪器。我有下一个HTML代码

            <tr ng-repeat="task in tasks">
                <td>1</td>
                <td>{{task.name}}</td>
                <td class="text-right">{{task.time}}</td>
            </tr>

我有模型任务

    function Task(name, time) {
        this.name = name;
        this.time = time;

        this.incrementTime = function($scope) {
            this.time++;
        }
    }

所以我想在控制器中每秒更新一次任务像这样的东西

function TaskController($scope, $interval) {
    $scope.tasks = [];

    $scope.addTask = function() {
        var task = new Task($scope.task, 0);
        $interval( task.incrementTime, 1000 );
        $scope.tasks.unshift(task);
        $scope.task = '';
    }
}

但我的表不更新任务

Answer 1

使用$interval服务并将incrementTime函数传递给区间

function TaskController($scope, $interval) {
   $scope.tasks = []

   $scope.addTask = function() { 
     //add task 
     var task = new Task($scope.task, 0);
     $interval( task.incrementTime, 1000 );
     $scope.tasks.push(task);
   }
}

并调整Task构造函数，以便该incrementTime引用正确的时间变量：

function Task(name, time) {
    var self = this;

    this.name = name;
    this.time = time;

    this.incrementTime = function() {
        self.time++;
    }
}

Fiddle

Answer 2

您将var task设置为新任务，而不是更新现有任务。像$scope.task.incrementTime()这样的东西就是你想要的东西

Answer 3

正如Gruffy Bunny所提到的，你应该使用$ interval而不是setInterval。 $ interval是setInterval的包装器，但是$ interval使得setInterval没有的基本功能是使用$ scope.apply（yourCallback）包装回调调用，这会启动一个消化周期，这将会检查你的范围模型并最终将更新你的观点。

Angular JS更新ng-repeat

3 个答案: