How to delete a Firebase Object based on it Property:key value?

Question

I just starting in AngularJs and Firebase. I am creating a todo list app.

In my app I have an html form like so :

<form name="frm" ng-submit="addTodo()" id="form-border">
    <div class="form-inline">
      <input type="text" class="form-control" name="newtodo" ng-model="newtodo" required="" id="inputform" />
      <button class="btn btn-success" ng-disabled="frm.$invalid">Go</button>
      <button class="btn btn-danger" ng-click="clearCompleted(todo)">Clear Completed</button>
    </div> <!-- end form group -->
  </form>

Below the form are the actual "todo" tasks in an html unordered list, added through with the form above.

code example:

<li ng-repeat="todo in todos" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="list-group-item" ng-class="inactive" >
      <input type="checkbox" ng-model="todo.done" ng-click="clickDone(todo)"/>
      <span ng-class="{'done':todo.done}" id="donetask">{{todo.title}}</span><!-- add line-through when task is done-->
      <ng-include ng-class="{'hiRank-off': !hover}" src="'rankbutton.html'"></ng-include><!-- ng-include rankbutton-->
    </li>

---

My app.js is storing this data with Firebase:

var myData = new Firebase("https://firebaseio-demo.com/ToDos");

and

$scope.todos.$add({'title':$scope.newtodo,'done':false, 'timetag': datecreated}); //push to Array 

    $scope.newtodo = '';

I am marking my tasks completed clickDone(todo) which grabs variable 'todo' from my ng-repeat. Like so:

$scope.clickDone = function(todo){
    $scope.todos.$save(todo); //saves todo state when is checked
  };  

---

My dilemma is I am trying to delete an object with my ng-click="clearCompleted(todo)", or in other words marked as complete. which can be found in the first code block But I don't think clearCompleted()function is in the ng-repeat="todo in todos" scope, so I'm having some troubles deleting objects with this function.

I am trying this to delete with no success and errors

TypeError: Cannot read property 'done' of undefined

$scope.clearCompleted = function($scope.todos){
    $scope.todos.$remove($scope.todo.done);
  };

Answer 1

I just figured it out!! I had to run forEach( ) method to look in $scope.todos and check if todo.done evaluated to true.

 $scope.clearCompleted = function(){ $scope.todos.forEach(function(todo){ if(todo.done){ $scope.todos.$remove(todo); } }); };