AngularJS: Filter and sort ng-repeat on data from Firebase

0
votes

SThis is an Angularjs ng-repeat loop where rssSources is a JSON array. Each element represents an object with parameters of an RSS feed such as titel, url and tags.

<li ng-repeat="ssrc in rssSources | filter:qsources | filter:qsources2 | filter:isCategory | limitTo:140 | orderBy: 'atitle'"><a ng-click="selectModel(ssrc.aurl)" target="_blank">{{ssrc.atitle}}</a></li>

I can filter it like so

<input type="text" ng-model="qsources" placeholder="Select Feed">

The problem: as long as rssSources is defined in the template - $scope.rssSources = [{}{}{}] - filtering with the input works and the other filters in ng-repeat work as well.

But as soon as I get rssSources from Firebase, the data are still shown but neither filter works. Plus, the sort does not work.

I have found a workaround at least for binding ng-repeat to the input field - it is really ugly but it works:

ng-repeat="ssrc in rssSources" ng-show='ssrc.atags.indexOf(qsources) > -1 || qsources == undefined'

Looking for the clean AngularJS-ish solution. Some basic thing is missing here to make a data source from Firebase filterable and sortable.

1
angularjsfilterangularjs-ng-repeatfirebaseng-repeat
That's a lot of filters. Each of those involves iterating all the data and creating a new array. You'll probably want to combine those into a custom query and do that work yourself for efficiency. - Kato
Thank you for looking into it, this is what I felt would be right. I am very new to AngularJ and to the MVC thinking in general. Therefore I tend to include too much logic into the view. Working on it! - Eckard Ritter

1 Answers

1
votes

You need to use orderByPriority in order to apply filters on your data, which I guess it's comming from Firebase.

Try this instead:

<li ng-repeat="ssrc in rssSources | orderByPriority | filter:qsources | filter:qsources2 | filter:isCategory | limitTo:140 | orderBy: 'atitle'">

I hope it helps you.