Remove "checked" item from array with angularJS

Question

I've got a list with todo's, in that list I can check them if they are done. If they are done I want to remove them from my list with angularJS.

<body>
    <h2>Todo</h2>
    <div ng-controller="TodoListController as todoList">
        <span>{{todoList.remaining()}} van de {{todoList.todos.length}} nog te doen</span>
        <ul class="unstyled">
            <li ng-repeat="todo in todoList.todos">
                <label class="checkbox">
                    <input type="checkbox" ng-model="todo.done">
                    <span class="done-{{todo.done}}">{{todo.text}}</span>
                </label>
            </li>
        </ul>
        <form name="formaddtodo" ng-submit="todoList.addTodo()">
            <input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
                   placeholder="Voeg nieuwe todo toe" required>
            <input class="btn-primary" type="submit" value="voeg toe">
        </form>
        <input class="btn-danger" type="button" value="verwijder" ng-click="todoList.removeItem()">
    </div>
</body>

with the removeItem function I want to delete the checked items from the list.

angular.module('todoApp', [])
.controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [{text:'learn AngularJS', done:false},
        {text:'build an AngularJS app', done:false}];

    todoList.addTodo = function () {
        todoList.todos.push({text: todoList.todoText, done: false});
        todoList.todoText = '';
    };

    todoList.remaining = function () {
        var count = 0;
        angular.forEach(todoList.todos, function (todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    todoList.removeItem = function() {
        todoList.todos.splice(???)
    }
});

It would be awesome if someone can explain it to me!

are you sure that you want to delete them from the list, and not just mark the done property and then hide them? — Claies
– Claies, Commented Apr 21, 2017 at 11:54

score 1 · Accepted Answer · 2017-04-21 11:57:25Z

1

todoList.removeItem = function() {
    angular.forEach(todoList.todo, function(todo, key) {
        if(todo.done)
            todoList.todos.splice(key, 1);
    });
}

You can use underscore filter

todoList.removeItem = function() {
    todoList.todos = _.filter(todoList.todos, function(todo) { 
        return !todo.done; 
    });
}

edited Apr 21, 2017 at 11:57

answered Apr 21, 2017 at 11:49

user4870812

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

2 Comments

Reinder Hijlkema Over a year ago

The underscore wasn't working for me.... "ReferenceError: _ is not defined" But the first code seems to work! Thank you

user4870812 Over a year ago

For underscore you should add script in html

LewisJWright · Accepted Answer · 2017-04-21 11:04:00Z

1

You could store your todos in a new array and empty the current array and only add back todos that aren't done something like this?:

todoList.removeItem = function() {
        var oldTodos = toDoList.todos;
        toDoList.todos =[];
        angular.forEach(oldTodos, function(todo){
            if (!toDoList.todos.done)
              toDoList.todos.push(todo);
          });
    }

answered Apr 21, 2017 at 11:04

LewisJWright

3621 gold badge2 silver badges16 bronze badges

Collectives™ on Stack Overflow

Remove "checked" item from array with angularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related