filter function in angular js not working

Question

I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D

Everything went well until I added the clearCompleted() method. it does not seem to be working:

HTML:

<!DOCTYPE html>
<html ng-app>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="todo.css">
</head> 
<body>
    <div ng-controller="TodoCtrl">

        <h2>Total todos: {{getTotalTodos()}} </h2>

        <ul class="unstyled">
            <li ng-repeat="todo in todos">

                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>

            </li>
        </ul>

        <form class="form-horizontal">
            <input type="text" ng-model="formTodoText" ng-model-instant>
            <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>

        </form>

        <button class="btn-large" ng-click="clearCompletedTodos()">

        Clear Completed

        </button>
    </div>

</body>

</html>

JS:

function TodoCtrl($scope) {

    $scope.todos = [
        {text: 'Learn Anagular', done:false}, 
        {text: 'Build an app', done:false}
    ];

    $scope.getTotalTodos = function() {

        return $scope.todos.length;

    };

    $scope.addTodo = function() {

        $scope.todos.push({text: $scope.formTodoText, done: false});
        $scope.formTodoText = '';
    };

    $scope.clearCompletedTodos = function() {

        $scope.todos = _.filter($scope.todos, function(todo) {

                return !todo.done;

        });

    };
}

the "completed todos" are not getting removed .

I'd suggest using a tutorial that is using a more recent version of Angular. 1.0.1 is fairly ancient now. — Davin Tryon
– Davin Tryon, Commented Mar 27, 2014 at 14:32
I think its the _.filter() thats the problem, not sure why though. — Angad Dubey
– Angad Dubey, Commented Mar 27, 2014 at 14:32
@DavinTryon yes I will do that, but this should still work returning not completed todos is pretty simple. — Angad Dubey
– Angad Dubey, Commented Mar 27, 2014 at 14:33
the docs show $filter('filter') but that doesnt fix it either. — Angad Dubey
– Angad Dubey, Commented Mar 27, 2014 at 14:34

Davin Tryon · Accepted Answer · 2014-03-27 15:29:10Z

1

Here is what I have done and it works for me:

Please notice that the follow lines has been changed (http:// added)

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

to the follow

 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

edited Mar 27, 2014 at 15:29

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

answered Mar 27, 2014 at 15:11

Lawrence Liu

4893 silver badges19 bronze badges

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

Comments

Lyn · Accepted Answer · 2014-08-08 09:18:55Z

0

I met the same problem, actually, write it like below, it works fine:

$scope.clearCompleted = function(){
    $scope.todos = $scope.todos.filter(function(todo){
        return !todo.done;
    })
};

answered Aug 8, 2014 at 9:18

Lyn

411 silver badge5 bronze badges

Comments

Kerberus · Accepted Answer · 2014-09-16 04:16:32Z

0

Actually none of those worked for me; I used this one.

var t = [];
angular.forEach($scope.todos, function (i)
{
    if (!i.done)
        t.push({text: i.text, done: i.done});
});
$scope.todos = t;

answered Sep 16, 2014 at 4:16

Kerberus

1

Collectives™ on Stack Overflow

filter function in angular js not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related