AngularJS filters not working when data loaded from Firebase

Question

I'm trying to learn angular with firebase. I'm getting data and successfully output it. But after this, simple filters not working with this data. When i'm doing simple $http.get from the same, but local json file, filters works just fine. My application module/controller code:

var app = angular.module('testSite', ['ngRoute', 'angControllers', 'firebase'])
.value('fbURL', 'https://sizzling-fire-3696.firebaseio.com/')
.factory('personData', function($firebase, fbURL) {
    return $firebase(new Firebase(fbURL));
});
app.controller("angCont", ['$scope', '$http', '$routeParams',
 'personData', 
    function($scope, $http, $routeParams, personData) {
        $scope.data = personData;
}]);

And this is my html template:

<div ng-controller="angCont">
    <select ng-model="personSelectFilter" ng-options="person.name for person in data">
        <option value="">Filter by name</option>
    </select>
    <input type="text" ng-model="personInputFilter" placeholder="Filter">
    <ul>
    <li ng-repeat="person in data | filter: personInputFilter |
     filter: personSelectFilter | orderBy: personSorting">
    Name: <a href="#/persons/{{person.name}}">{{person.name}}</a><br/>
    Surname: {{person.surname}}<br/>
    Age: {{person.age | number}}<br/>
    Experience (months): {{person.exp | number}}</li>
    </ul>
</div>

http://angulartest.hostoi.com/angsite.html#/

Can you show a link? That definitely should not be happening. — Fresheyeball
– Fresheyeball, Commented Feb 18, 2014 at 20:41
I'm trying it on localserver. Or stuff like that is not supposed to work on localhost? — Nikolay Talanov
– Nikolay Talanov, Commented Feb 18, 2014 at 20:43
Well, its client side, so it should work the same regardless. — Fresheyeball
– Fresheyeball, Commented Feb 18, 2014 at 20:46
All i can say, that data from firebase loading with delay about 0.5-1 second. But it's loads only in ng-repeat ul-li. Select with ng-options is empty like nothing happend. And simpliest input filters not working too. — Nikolay Talanov
– Nikolay Talanov, Commented Feb 18, 2014 at 20:50
angulartest.hostoi.com/angsite.html# - demo on freehosting site — Nikolay Talanov
– Nikolay Talanov, Commented Feb 18, 2014 at 20:58

Kato · Accepted Answer · 2014-02-18 21:18:40Z

5

$firebase always creates an object, so the data variable contains key/value pairs. However, filter and orderBy in Angular expect an array. This can be corrected by using orderByPriority, which is covered in the AngularFire docs under Ordered Data and Arrays.

<li ng-repeat="person in data | orderByPriority | filter: personInputFilter |
    filter: personSelectFilter | orderBy: personSorting">

edited Feb 18, 2014 at 21:18

answered Feb 18, 2014 at 21:06

Kato

40.6k6 gold badges124 silver badges149 bronze badges

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

3 Comments

Nikolay Talanov Over a year ago

Yes, that is what i needed! Thank you, i definitely was googling wrong questions about filters and other stuff.

Kato Over a year ago

It should probably be part of the angularFire tutorial or getting started guide.

Fresheyeball Over a year ago

wow that is a long filter chain. No prob for learning, but be careful with those digest permutations.

Collectives™ on Stack Overflow

AngularJS filters not working when data loaded from Firebase

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related