Not able to understand the deleting process while writing todo list in AngularJS

Question

I am trying to write a todo application in Angularjs in the following code.

function write_controller($scope){
  $scope.todos = [{text:'hey all',done:false}, 
                 {text:'hello',done:false}];
  $scope.addtodo = function(){
  $scope.todos.push({text:$scope.todopush,done:false});
    $scope.todopush = '';
  }
  $scope.delete = function(){
    var oldtodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldtodos, function(x){
      if (!x.done){
        $scope.todos.push(x);}
    });
  };
}

<html ng-app>
    <head>
     <script src =  
     "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">   
      </script>
      </head>
      <body>
      <div class = "basic_class" ng-controller = "write_controller">
      <ul>
        <li ng-repeat = "todo in todos"><input type = "checkbox" ng-model  
         ="todo.done">{{todo.text}}</input></li>
      </ul>
      <input type = "text"
        placeholder = "please add data here"
        ng-model="todopush">
      </input>
      <input type = "button" ng-click ="addtodo()" value ="Click me!!"></input>
      <input type = "button" ng-click = "delete()" ng-model="remove" value =  
       "remove!"></input>
      </div>
</body>
</html>

In the following code ,I have the following questions. How is the delete operation working??

My understanding: 1)It pushes the existing array into a new array 2)It clears the exisitng array 3)Iterates over the new array 3)Checking the done functionality??? (When it says !x.done , is it true or false???) Any help would be highly appreciated.

If you're going to share code, do it using jsfiddle or something similar. — Pablo Recalde, Oct 09 '16 at 03:41
@charlietfl yes i went through again, i was assuming oldtodos as todos — Sajeetharan, Oct 09 '16 at 03:44
Do note that you are using a very old version of angular and if you were to upgrade would have to declare controller as part of the module. Support for global functions was dropped quite some time ago — charlietfl, Oct 09 '16 at 03:47
OT: you can shorten the delete function to this: `$scope.todos = $scope.todos.filter(function(todo){ return !todo.done });` to your question: `!` means NOT, now read the line/if-block out loud, seriously, try it. — Thomas, Oct 09 '16 at 05:00

charlietfl · Answer 1 · 2016-10-09T04:01:26.040

1

Walk through the steps

$scope.delete = function() {
    // store existing todos array in variable
    var oldtodos = $scope.todos;
    // create new empty array for todos
    $scope.todos = [];
    // loop over previously stored todos
    angular.forEach(oldtodos, function(x) {//x is element of the array - a single todo object
      // if x.done is not truthy
      if (!x.done){
       // push this item into `$scope.todos`
       $scope.todos.push(x);
    });
}

Basically it only pushes the done:false into new version of $scope.todos which effectively removes the done:true

edited Oct 09 '16 at 04:01

answered Oct 09 '16 at 03:53

charlietfl

170,828
13
121
150

On a checkbox click ,how is the done getting updated from false to true??? – mohan babu Oct 09 '16 at 03:56
1

`ng-model ="todo.done"` see: https://docs.angularjs.org/api/ng/directive/ngModel – charlietfl Oct 09 '16 at 03:57
1

short answer is `ng-model` binds to the data model object and will change when the checkbox changes – charlietfl Oct 09 '16 at 03:58

Not able to understand the deleting process while writing todo list in AngularJS

1 Answers1