AngularJS filtering

Question

I have been trying to write the todo mvc application in angular but I have got stuck with the filtering. What I am trying to filter is todos which are completed/Active or show all. I have a variable that is called isCompleted which I'm trying to filter by. The strange thing is that it seems to work when I filter to get the completed but when I try to show the Active it shows both Active and completed. I have been trying to set data-ng-repeat="todo in todos | filter: {isComplete: false}" but it still shows all my todos. Any ideas on what I am doing wrong?

<section id="main" data-ng-cloak="">
<input type="checkbox" id="toggle-all" data-ng-model="toggleAll" data-ng-click="markAll(toggleAll)" />
<ul id="todo-list">
    <li data-ng-repeat="todo in todos | filter: selectFilter()" data-ng-class="{completed: todo.isCompleted}">
        <input type="checkbox" class="toggle" data-ng-model="todo.isCompleted" />
        <label>{{todo.title}}</label>
        <button class="destroy" data-ng-click="removeTodo(todo)"></button>
    </li>
</ul>

function TodosController($rootScope, $scope, $location) {

$scope.location = $location;
$scope.$watch('location.path()', function (path) {
    $scope.selectFilter = function () {
        if (path == '/active') {
            return { isCompleted: false };
        }
        else if (path == '/completed') {
            return { isCompleted: true };
        }
        else
        {
            return null;
        } 

    };
});

if (!$rootScope.todos) {
    $rootScope.todos = [{ title: "todo1", isCompleted: true }, { title: "todo3", isCompleted: true }, { title: "todo2", isCompleted: false }];
    //$rootScope.todos = [new Todo('Todo1', true), new Todo('Todo4', true), new Todo('Todo2', true), new Todo('Todo3', false)];
}
...

I've just tried your code and it works as a charm for me...

Shay Friedman
– Shay Friedman

2013-08-02 12:57:12 +00:00
Commented Aug 2, 2013 at 12:57 — Shay Friedman
– Shay Friedman, Commented Aug 2, 2013 at 12:57

zs2020 · Accepted Answer · 2013-08-02 13:52:17Z

2

In <li>, add

ng-show="toggleAll || todo.isCompleted"

This means when toggleAll is checked, then it shortcut the isComplete and returns true for each item; if toggleAll is not checked, then whether to show depends on isComplete.

Demo on jsFiddle

answered Aug 2, 2013 at 13:52

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

Collectives™ on Stack Overflow

AngularJS filtering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related