Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Trying to learn Angular and having an issue with deleting several objects at once. I'm creating a To Do app and when a user checks off several items and clicks a "Clear Completed" button would like for those items checked to be removed and remaining items stay.

Currently I can add, delete single item, and edit an item. What I would like to do is click several items with checkboxes and than clear them depending on the done:true

Problem: How can I run through each item and see if the <span class="item-display done-{{items.done}}">{{items.title}}</span> is TRUE and delete the items with the clear() function?

Angular Version: 1.3.15

Directory set up:

|-index.html
|-js/
    |app.js
    |todo.ctrl.js

HTML:

<body ng-app="app">
<section class="module" ng-controller="todoController as todo">
<div class="container">
    <h1>{{todo.title}}</h1>
    <form name="todo.addForm" class="form" ng-submit="todo.addItem()">
        <div class="form-group">
            <label>Add New Item</label>
            <input type="text" class="form-control" ng-model="todo.new.title" required />
        </div>
        <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-plus-sign"> Add</span></button>
    </form>
    <h3>Items:</h3>
    <ul class="list-group">
        <li class="list-group-item todo-item" ng-repeat="items in todo.items">
            <input type="checkbox" ng-model="items.done"/>
            <span class="item-display done-{{items.done}}">{{items.title}}</span>
            <form>
                <input class="form-control" type="text" ng-model="items.title" ng-keyup="todo.editOnEnter($index)"/>
            </form>
            <a ng-click="todo.delete($index)">Delete</a>
            <a ng-click="todo.toggleEditMode($index)">Update</a>
        </li>
    </ul>

    <button class="btn btn-danger pull-right" ng-click="todo.clear()">Clear Completed</button>
</div>
</section>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/todo.ctrl.js"></script>

app.js:

angular.module('app', []);

todo.ctrl.js:

angular.module('app').controller("todoController", function(){
var vm = this;
vm.title = 'To Do Application';
vm.input = '';
vm.items = [{
    title   :   'dog food',
    done    :   false
}];
vm.new = {
    title : '',
    done: false
};
vm.addItem = function(){
    vm.items.push(vm.new);
    vm.new = {title:'',done: false};
};

$(document).click(function(){
    console.log(vm.items);
});

vm.delete = function (index){
    vm.items.splice(index, 1);
};
vm.update = function(index){
    vm.items.copy(index, 1);
};
vm.toggleEditMode = function(){
    $(event.target).closest('li').children('.item-display, form').toggleClass('editing');
};
vm.editOnEnter = function(index){
    if(event.keyCode == 13){
        vm.toggleEditMode();
    }
};

//
//
// NEED HELP HERE
//
//
vm.clear = function(){
    var oldTodos = vm.items;
    //vm.items = [];
    angular.forEach(oldTodos, function() {
        if (vm.items.done == true){
            this.remove();
        }
    });
};
});
share|improve this question

1 Answer 1

up vote 1 down vote accepted

I'm not fully sure if I understand your problem, but if I'm not mistaken, you want to clear done todos from your list?

The Array.prototype.filter function will trim an array based on a filtering function. If you return true, it will keep the item, if you return false, it removes it.

vm.clear = function(){
  vm.items = vm.items.filter( function( item ){
    return !item.done
  }
}
share|improve this answer
1  
This is what I was looking for. I'm following about 4 different tutorials (some older) and looking up documentation trying to piece it all together. I wanted to trim away any objects that had an associated done : true but keep those with done : false. –  Full-Hybrid Apr 5 at 1:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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