如何在函数调用中清除所有已完成的任务？

Question

I'm working in Angular, and I have checkboxes that switch the Boolean (to signify task completion). I also have two arrays, one that holds a list of objects and another to hold the first key values once completed and cleared.

$scope.taskList = [{
  complete: false,
  foo: "1",
  bar: "2",
  baz: "3"
}];

$scope.completedTasks = [];

The below function works properly to clear tasks when only one or two are checked; however, when the number of items checked grows, only a portion of checked items will clear; if you keep invoking the function, eventually all tasks will clear, but I can't figure out how to clear the entire list in one fell swoop.

$scope.clearComplete = function() {
  for (var i = 0; i < $scope.taskList.length; i++) {
    if ($scope.taskList[i].complete == true) {
      $scope.completedTasks.push($scope.taskList[i].foo);
      $scope.taskList.splice(i, 1);
    }
  }
  console.log($scope.completedTasks);
  return $scope.taskList;
};

I'm at a loss for how to correct the logic and am hoping that some fresh eyes will be able to help me out.

For this project, I'm trying to keep dependencies low, without the help of other helper libraries like Underscore and Lodash.

Answer 1

first of all if you are doing taskList.splic then loop backwards. otherwise you can do like this:

var incompleteTasks = [];
$scope.tasks.forEach(function(task){
    if(task.complete) {
        $scope.completedTasks.push(task.foo);
    } else {
        incompleteTasks.push(task);
    }
});
$scope.tasks = incompleteTasks;

so, you will iterating exactly once to your array, and make it happen with very cleaner approach.

Answer 2

You don't need any external libraries to use forEach , or filter . And I would approach it in two steps for readability:

$scope.clearComplete = function() {

  //push completed tasks to completedTasks
  $scope.taskList.forEach(function(t) {
    if(t.complete) {
      $scope.completedTasks.push(t.foo);
    }
  });

  //then filter the task list
  $scope.taskList = $scope.taskList.filter(function(t) {
    return !t.complete;
  });

  console.log($scope.completedTasks);
  return $scope.taskList;
};