0

I need to loop through a check list and delete the completed items in the array, what i currently have for code is:

 app.controller("MainController", ["$scope",function($scope) {
$scope.list = [{
    text: 'Figure your stuff out',
    done: false
  }, {
    text: 'Count to seven',
    done: false
  }


];


$scope.addTask = function() {
  $scope.list.push({
    text: $scope.fromListText,
    done: false
  });
  $scope.fromListText = '';
};
$scope.removeCompleted = function(index) {
  $scope.list.splice(index, 1);

}

for my controller, and this as my Html:

    <html>

<head>
  <script data-require="[email protected]" data-semver="1.4.0-rc.2"        src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="toDoList">
  <div class="header">
    <div class="container">
      <h1>Your list brah</h1>
    </div>
  </div>
  <div class="myList" ng-controller="MainController">
    <div class="container">

      <div ng-repeat="task in list">

        <form class = "myTask">
          Task:
          <br>
          <input type="checkbox" ng-model = "task.done">{{ task.text  }} 
        </form>


      </div>
      <form>
        <input placeHolder="Things I dont want to do..." type="text" ng-  model="fromListText" ng-model-instant/>
        <button class = "myButton" ng-click = addTask() >Add task</button>
      </form>

      <button class = "myButton" ng-click = "removeCompleted()" >Clear Completed Tasks</button>
    </div>
  </div>



</body>

</html>

I'm a bit new to scripting so all I want to do is have something check to see if the check box is true and if it is then to remove it here is the plunkr link if you want to see the code in action. Plunkr Link

1
  • You might take a look at the Doc for ngRepeat. There's something like an $index value which can be applied to each item of choice. Than you could remove those items by splice, as you already did.
    – user4164128
    May 18, 2015 at 14:27

2 Answers 2

1

What you want in your removeCompleted method is

var $scope = {}

$scope.list = [{
    text: 'Figure your stuff out',
    done: true
  }, {
    text: 'Count to seven',
    done: false
  }, {
    text: 'Count to eight',
    done: true
  }, {
    text: 'Count to nine',
    done: false
  }
]

for(var i = 0; i < $scope.list.length; i++) {
    	if($scope.list[i].done)  {
    		$scope.list.splice(i, 1)
    	 	i--
    	}
    }

$scope.list.forEach(function(item) {
  alert(item.text + ', ' + item.done)
})

that will loop over your list items and if done is true then it will remove that item out of the array

3
  • This was the closest i got it to work thank you! It seems however that it deletes all of the checked tasks except for the last one that is selected. Would there be any explanation for this? My assumption is that it loops one less time than needed. May 18, 2015 at 15:08
  • The problem with my previous answer was that the method forEach just loops over all of them but during the looping process the index's were being removed from the array so it could end up removing the wrong index, this new solution takes into account the removing of indexs. for(var i = 0; i < $scope.list.length; i++) { if($scope.list[i].done) { $scope.list.splice(index, 1); i--; }; }; May 18, 2015 at 15:21
  • where should this code be place or should it be just in my remove statement? May 18, 2015 at 16:34
0

For example:

$scope.deleteTasks = function () {
    for (var i = $scope.tasks.length - 1; i >= 0 ; i--) {
        if ($scope.tasks[i].Completed) {
            $scope.tasks.splice(i, 1);
        }
    }
}

See example HERE

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.