AngularFire Filtering Data Returned by Firebase

Firebase is a great way to connect applications to a database that will sync data in realtime. Tying this in with AngularJS allows you to create a single page application that updates dynamically and as data changes without page refreshes. This allows you to create applications that can give your users access to data the moment it is updated and changed. They have a great binding called AngularFire that links the two services together nicely.

One thing that I had problems with was filtering data returned by Firebase with the great AngularJS filter method. Because AngularFire returns a dictionary with methods and elements the AngularJS filter has problems filtering the data correctly. The AngularJS template rendering can render the data just fine but the filter does not work. To fix that you'll need to employ the AngularFire method orderByPriority before your AngularJS filter. Here is an example.

<input type="text" class="form-control" ng-model="storeSearch.$" placeholder="Store Search">
<ul class="list-unstyled" ng-repeat="store in stores | orderByPriority | filter:storeSearch">
	<li><a href="#/stores/{{store.name}}/" class="btn btn-danger btn-lg">{{store.name}}<br/>{{store.address}}</a></li>
</ul>

<script>
angular.module('myApp.controllers', [])
.controller('StoresController', ['$scope', '$firebase', function($scope, $firebase) {
    var ref = new Firebase('https://MYFIREBASE.firebaseio.com/stores/');
  	$scope.stores = $firebase(ref);
  }])
</script>

In my Controller I access the list of stores using Firebase and $firebase. At this point my $scope has the list of stores with some methods used by AngularFire to update data. The partial above will render the list just fine but without orderByPriority the search filter would not work. The orderByPriority converts an object returned by $firebase into an array. This array will work with any normal AnguarJS filter.

Here is the definition from the API of AngularFire.

The orderByPriority filter is provided by AngularFire to convert an object returned by $firebase into an array. The objects in the array are ordered by priority (as defined in Firebase). Additionally, each object in the array will have a$id property defined on it, which will correspond to the key name for that object.

That's all there is to it. I hope this helps someone else figure out this problem as I spent a long time trying to get my filter to work with Firebase objects.

AngularFire Filtering Data Returned by Firebase

Tags