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