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
Related
<div ng-repeat="user in users | orderBy:'-type'">
<p>{{user.name}}</p>
<p>{{user.type}}</p>
</div>
I have type : 12, 5, 3
I want to give higher precedence to 12 then 3 move 5 to end of line
Can you try this hope this will help you
You need to add group filter
<ul ng-repeat="(key, value) in countries | orderBy: 'status' | groupBy: 'status'">
Status : {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
See below jsfiddle
https://jsfiddle.net/cojtn8vm/6/
You need to sort the collection yourself before repeating it or you need to convert user.type to string and then you can use like given below link
[1]: https://jsfiddle.net/kinjalpgor/cojtn8vmenter code here
I think popular question, but I don't found solution. Look e.g. I have object {title:..., book:.... author:...} and would like filter my view by title like below:
<div ng-repeat="product in main.products | filter: {{product.title}}">
<span>{{product.author}}</span>
</div>
In <span> author has shown, but filter not working.
If you get your filter value from server side, you can easily simulate it as:
$scope.by_title = '';
$timeout(function(){
$scope.by_title = 'on';
},3000);
and:
<tr ng-repeat="obj in objs | filter:{ title: by_title }">
DEMO PLUNKR
As you commented, you should use orderBy filter for this.
<div ng-repeat="product in main.products | orderBy: 'title'">
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>
<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>