CODEWITHSUNDEEP
angularjs
Reinder Hijlkema
Reinder Hijlkema

Reputation: 5

Remove "checked" item from array with angularJS

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!

Upvotes: 0

Views: 1308

Answers (2)

user4870812
user4870812

Reputation: 

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

Upvotes: 1

LewisJWright
LewisJWright

Reputation: 362

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

Upvotes: 1

Related Questions