I have this "filter" with ng-if working perfectly fine in my code:
<li ng-if="item.qext.type == 'mashup'" data-id="{{item.id}}" ng-repeat="item in assets.extensionList">
But I want to twist it a little bit using:
<li data-id="{{item.id}}" ng-repeat="item in assets.extensionList | filter: (item.qext.type == 'mashup')">
in order to end up doing something like:
<li data-id="{{item.id}}" ng-repeat="item in filteredMashups = assets.extensionList | filter: (item.qext.type == 'mashup')">
But for some reason this filter:
ng-repeat="item in assets.extensionList | filter: (item.qext.type == 'mashup')"
is not giving the same results as this one:
ng-if="item.qext.type == 'mashup'"
Why?
Related
I am trying to sort the shop titles in alphabetical order right now the data is showing randomly. I am adding the fiddle of that: https://jsfiddle.net/jtdk157s/
enter code here
User the filter OrderBy and specify the property of the Object:
ng-repeat="item in groupedData | filter:categoryFilter | orderBy:['node.location','node.title']
Check working sample:
https://jsfiddle.net/bLvLy1sh/1/
With groupBy filter
<div ng-repeat="(key, items) in groupedData | groupBy: 'node.location' )">
<h2>{{key}}</h2>
<ul>
<li ng-repeat="location in items">
{{ location}}
</li>
</ul>
</div>
Using angular.filter i am using groupBy and length to give me a count of the number of records logged by the user emailId
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId'">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
This all works fine giving me a list of emailIds, the number of records for each emailId and the records listed underneath.
What I a trying to do is to order the data by the number of records for each emailId (in other words order the data by the value returned by {{ filteredList.length}}).
I have tried adding orderBy to the ng-repeat as below
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | orderBy: filtered.length">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
but this does not make any difference to the order the items are listed. I have had a look for an existing answer but all of the orderBy not working with groupBy seem to refer to ordering by an item contained in the value not the length of the filter.
the user group of angular-filter have written what needs to be done at below link:
https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792
groupBy returns an object but orderBy fiter expects an array. So use toArray:true and give orderBy an array to work with.
Below is the code that must work:
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | toArray: true |orderBy: filtered.length">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
Also, keep in mind that orderBy must be the last filter in the chaining.
Edit
You can also switch places of orderBy and groupBy. If OrderBy filter is in the first place it sorts and after that groupBy filter initializes without toArray filter
Example:
<div ng-repeat="(key, value) in array | orderBy: filtered.length | groupBy: 'emailId'">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
This can easily be fixed by just ordering first then grouping. Much better performance.
<div ng-repeat="(key, value) in leaderboard | orderBy: filtered.length" | groupBy: 'emailId'>
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
What is the correct syntax to switch from my simple ng-show to a filter in my ng-repeat? (item in list | filter:{item.value == 'abc'} or so)
<ol ng-repeat="item in list">
<li ng-show="item.value == 'abc'">test</li>
</ol>
Do not use ng-repeat inside <ol> tag.
This will repeat <ol> tag each time with single <li>.
Use ng-repeat in <li> tag to repeat <li> tag inside <ol> tag and use filter with ng-repeat.
use like this :
<ol>
<li ng-repeat="item in list | filter: { value : 'abc' }">test</li>
</ol>
working plunkr
<ol ng-repeat="item in list | filter:{value: 'abc'}">
<li>test</li>
</ol>
Plunker: https://plnkr.co/edit/uw0LNygWbj4Njhp1n7PN?p=preview
Try this
<ol ng-repeat="item in list | filter: {value: 'abc'}">
<li>test</li>
</ol>
Angular Filter doc
You can use nf-repeat Filter
<ol ng-repeat="item in list | filter : {value : 'abc'}">
<li>test</li>
</ol>
read AngularJS API Document
I'm trying to use an ng-if within a repeater. Here's what I'm trying to do:
<li ng-repeat="timers in current.Timer | groupBy: 'day' | toArray:true | orderBy: '$key'" class="details-single-day" ng-click="editView('/edit')" ng-if="timers.$key==isToday()">
<span class="details-day-name">Day: {{timers.$key}}</span>
<bars timer="timers" day="timers.$key" title="Week"></bars>
</li>
isToday() function returns today as an int:
$scope.isToday = () ->
return new Date().getDay()
Basically, I want to display my values if $key (from 0 to 6) is equal to isToday() result.
Without the ng-if, i can see all the details for everyday, including {{timer.day}} as int.
But with the ng-if, nothing at all is displayed.
Any help will be really appreciated. Thanks
It seems you cannot use ng-repeat and ng-if on the same element.
I've put up a fiddle for you to see : http://jsfiddle.net/bh83jc4b/2/
I suggest filtering your array using plain javascript (as in the fiddle) or a custom filter.
$scope.filtered = $scope.current.Timer.filter(function (timers) {
return timers.$key === $scope.isToday();
});
<li ng-repeat="timers in filtered | groupBy: 'day' | toArray:true | orderBy: '$key'" class="details-single-day" ng-click="editView('/edit')">
<span class="details-day-name">Day: {{timers.$key}}</span>
<bars timer="timers" day="timers.$key" title="Week"></bars>
</li>
I finally managed to solve this, and it was really simple.
Instead of doing:
<li ng-repeat="timers in current.Timer | groupBy: 'day' | toArray:true | orderBy: '$key'" class="details-single-day" ng-click="editView('/edit')" ng-if="timers.$key==isToday()">
<span class="details-day-name">Day: {{timers.$key}}</span>
<bars timer="timers" day="timers.$key" title="Week"></bars>
</li>
using a function (isToday), I did this instead:
<li ng-repeat="timers in current.Timer | groupBy: 'day' | toArray:true | orderBy: '$key'" class="details-single-day" ng-click="editView('/edit')" ng-if="timers.$key == today">
<span class="details-day-name">Day: {{timers.$key}}</span>
<bars timer="timers" day="timers.$key" title="Week"></bars>
</li>
where today is not a function anymore:
$scope.today = new Date().getDay()
and now it works perfectly. Thanks to everyone for your help
<div class="info">Showing {{filtered.length}} Results</div>
<ul class="topiclist">
<li ng-repeat="product in filtered = db.products | filter:by_price_tiers | filter:by_category | orderBy:predicate">
<div>{{product.model_name}}</div>
<li></ul>
I can see the list changes when I apply different filters.
But filtered.length remains same all the time.
Please help me here.
As you've written it filtered gets all of db.products, then the filters are applied.
Try wrapping the assignment and filters in parentheses:
<div class="info">Showing {{filtered.length}} Results</div>
<ul class="topiclist">
<li ng-repeat="product in (filtered = db.products | filter:by_price_tiers | filter:by_category | orderBy:predicate)">
<div>{{product.model_name}}</div>
<li></ul>