Filter a $firebaseArray

This example uses Firebase Queries to order a list of todos by their completed status. The ng-if directive determines whether the todo is shown based on the state of the "Show Completed" checkbox. The entire list is downloaded with the query. If you want to only download the non-completed items you can use the equalTo() function:

by johnoscott

HTML

<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
<div ng-app="myApp">
    
    <div ng-controller="MainCtrl as ctrl">
        
        <h3>Todo List</h3>
        <label>
            <input type="checkbox" ng-model="ctrl.showAll">
            Show Completed
        <label>
        
        <ul ng-repeat="todo in ctrl.todos">
            <li ng-if="ctrl.showCompleted(todo)">{{ todo.title }} - <input type="checkbox" ng-model="todo.completed" ng-change="ctrl.toggleCompleted(todo)"> </li>
        </ul>
            
        
    </div>
    
</div>

JavaScript

/**
Filter a $firebaseArray
-------------

This example uses Firebase Queries to order a list of todos by their completed status. The ng-if directive determines whether the todo is shown based on the state of the "Show Completed" checkbox.

The entire list is downloaded with the query. If you want to only download the non-completed items you can use the equalTo() function:

All todos
  var ref = new Firebase("<my-firebase-db>")
  					.orderByChild('completed');
  
Non-completed todos
  var ref = new Firebase("<my-firebase-db>")
  					.orderByChild('completed')
                    .equalTo(false);
*/

angular
	.module('myApp', ['firebase'])
	.controller('MainCtrl', MainCtrl);

function MainCtrl($firebaseArray) {
  var ref = new Firebase("https://array-demo.firebaseio-demo.com/values").orderByChild('completed');
  
  this.todos = $firebaseArray(ref);
  this.showAll = false;
    
  this.showCompleted = function(todo) {
     return this.showAll || todo.completed === false;
  };
    
  this.toggleCompleted = function(todo) {
  	this.todos.$save(todo);
  };
}
MainCtrl.$inject = ['$firebaseArray'];