Delete multiple items in AngularJS array based on true vale

Question

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();
        }
    });
};
});

JoshWillik · Accepted Answer · 2015-04-05 01:32:14Z

3

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
  }
}

answered Apr 5, 2015 at 1:32

JoshWillik

2,63524 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wsfuller Over a year ago

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.

ahmednawazbutt Over a year ago

You are the man @Josh. I was looking for this for like 18 hours now.

Collectives™ on Stack Overflow

Delete multiple items in AngularJS array based on true vale

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related