I am looking for a way to filter a firebaselistobservable. I have code like the following
<div>
<a *ngFor="let lis of list | async" (click)="onSelect(lis)" >
{{lis.name}}
</a>
</div>
this.list = this.fb.getList('Instructors');
What i want to be able to do is once the list of instructors is loaded be able to type into a text box and as i type the names of the instructors will filter. I am having a lot of trouble figuring out a way to filter a firebaselistobservable, which in this case is my list. If anyone has a method to achieve this it would be greatly appreciated.
Thanks!
If you want to do the filtering on the client, just add a filter pipe to your ngFor directive. In angular2 it is not offered out of the box, but there are plenty available.
Related
next question (sorry, I really try to code, but at the moment I don't understand everything).
I have a list with checkboxes which is generated with ng-repeat.
Above I have a tab navigation which I want to use as a filter.
I tried something like this (in many variations) but it doesn't work:
<span ng-repeat="item in items | filter: item.category: cat.category">
My exceptation is that on tab Category1, only bullhorn, car and star are shown, Category2 only euro, eye and facebook and tab Category3 only fax, feed and film are shown.
Now there are all items from the scope, not filtered after category.
Heres a plnkr example with my code: https://plnkr.co/edit/iCQRwH4XRr3DKQcQG329
Many thanks in advance!
What you want is to filter your Array with the cat Object, so you just add the Object witch you want to use to filter (look at the Docmentation > expression > Object):
<span ng-repeat="item in items | filter: cat.category">
Working Plunker
I have a long list of products that are displayed using ng-repeat and I'm creating a filter on the left to pare down the list in the main content well.
I have a requirement to pre-count the results of each possible filter such that the text of the link of that filter button will show the results you will receive if you turn that filter on, just like happens in an e-commerce site.
I'm wondering how to do this with AngularJS. I'm hoping there's an easier way to do this other than creating a custom filter on the scope for each possible filter.
Note that I don't have to worry about chaining filter values- just the results of selecting that one filter.
Thanks, Scott
Not knowing exactly what the data model looks like I can't say if you need a custom filter. But for a simple data model you should be able to use a simple filter like so:
<ul>
<li ng-repeat="item in items">
<a ng-click="filter(item.type)">{{item.name}} {{(allData | filter:item.type).length}}</a>
</li>
</ul>
Here is a working example http://codepen.io/mkl/pen/GqpqYN
New to angular!
I've set up a very basic filter of which I'm quite happy with. Yet I want to transpose the inline filter to a .filter() function - I hope to use it like filter: dataFilter, or something similar.
So, currently I have some select fields:
<select ng-model="search.foo"><!-- options --></select>
<select ng-model="search.bar"><!-- options --></select>
And an ng-repeat of the sorted data:
<div ng-repeat="data in response.data | filter:{foo: search.foo, bar: search.bar}">
<!-- display sorted data -->
</div>
Above in the ng-repeat is what I would call the inline filter of which I want to abstract.
How do I go about doing this?
All guidance appreciated.
My end game aim is to show a message when there an no results in the filter. I believe the filter needs to be "abstracted" in order for this to work? Something along the lines of:
<p ng-show="(response.data | filter:blahFilter).length == 0">No results found.</p>
I would really advice you to move this to the controller. Then inside there just use your filter as a function call
$scope.myData = $filter('blaFilter')(response.data)
then
<p ng-show="myData.length == 0">No results found.</p>
<div ng-repeat="blub in filtered = (blubs | filter:tag)">
<span ng-repeat="tag in blub.tags" class="tag-box">{{tag}}</span>
</div>
How can I unnest it into one query. I imagined it like this:
<span ng-repeat="tag in blub.tags in filtered = (blubs | filter: tag)>{{tag}}</span>
Object blub has more than one tag, there are more than one blub objects.
EDIT:
Plunker:
http://plnkr.co/edit/mWjyryOsV5zZJisZzV3D
GOAL: Reduce 2 times ng-repeat into one ng-repeat which shows the same tags.
In that situation I would recommend you first to create one collection instead of doing double looping.
<span ng-repeat="tag in getBlupList(filtered)" class="tag-box">{{tag}}</span>
Where getBlupList(filtered) are JS method. Some kind of reducer that creates one list instead of what you have.
I dont know how your collection look like but personally for me for such situation the best solution is to use Underscore.js lib. ".flatten()" or ".pluck()"
Currently I am trying to filter my ng-repeat. The filter should check the status of the couch DB field "_deleted" and show the article if "_deleted" is false, and remove the article from view if it is true.
ng-repeat="article in articles | filter:_deleted=true"
I know my syntax is incorrect, how can I format this filter correctly? Please let me know if you guys need any more info.
-Edit-
I found a solution for this. What I ended up having to do was create a function to check each item if it had the field, or rather the absence of said field. Below is the function I created and is included in the controller.
$scope.trashCheck = function(article) {
return !article.hasOwnProperty('_deleted');
};
Once I had that set up I filtered my results like this.
<li ng-repeat="article in articles | filter:trashCheck">
Easy from the filter docs (you use an object to do the match)
ng-repeat="article in articles | filter:{_deleted: true}"