I have this html
<ion-item ng-repeat="item in ::itemsToShow = extensionItems | orderBy:'distance' " class="entry" ng-class="{'alt-background': $index % 2 == 1}" ng-click="itemDetail(item)">
...details...
</ion-item>
I can't figure out the correct way to add track by:item._id I always get this error:
Syntax Error: Token 'track' is an unexpected token at column 30 of the expression [itemsToShow = extensionItems track by:_id |...
I tried:
<ion-item ng-repeat="item in ::itemsToShow = extensionItems track by:item._id | orderBy:'distance' " class="entry" ng-class="{'alt-background': $index % 2 == 1}" ng-click="itemDetail(item)">
<ion-item ng-repeat="item in ::itemsToShow = extensionItems track by:_id | orderBy:'distance' " class="entry" ng-class="{'alt-background': $index % 2 == 1}" ng-click="itemDetail(item)">
<ion-item ng-repeat="item in ::itemsToShow = extensionItems | orderBy:'distance' track by:_id" class="entry" ng-class="{'alt-background': $index % 2 == 1}" ng-click="itemDetail(item)">
<ion-item ng-repeat="item in ::itemsToShow track by:_id = extensionItems | orderBy:'distance' " class="entry" ng-class="{'alt-background': $index % 2 == 1}" ng-click="itemDetail(item)">
Also tried using _id and item._id and I always get the same error (different column of course). How or where should I write the track by ?
Edit: Angular version 1.4.3
Edit 2: The Json data have this structure
_id: "000000426"
_rev: "1-5003008fcf25b8f130233b944bb761c9"
someText: "<p class="bodytext ">Something for you.</p>"
name : "You-Shop"
homepage : "http://www.youshop.com"
id: 426
You just miss the fact track by must not be followed by a colon (:)...
`track by` MUST be the final statement in a ng-repeat.
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
<span ng-repeat="sport in profile.sports track by $index">
{{ (profile.type == 2) ? ($index >= 0) ? sports[sport.sport_id] + ", " : sports[sport.sport_id] : '' }}
</span>
I want each element to be separate by , if there is at least 1 item.
Expected result in sports[sport.sport_id]:
cricket, football, hockey
cricket, hockey
cricket
cricket, soccer
Currently I'm getting all these without commas, please suggest, thanks.
You can use javascript join with comma separated
Example
<span ng-repeat="sport in [{value: ['a']}, {value: ['b','c']}]">
<pre>{{sport.value.join(', ')}}</pre>
</span>
Ouput:
a
b, c
try this
<span ng-repeat="sport in profile.sports track by $index">
{{ modifiedSport(sport, $index) }}
</span>
and add this to your controller
$scope.modifiedSport = function(sport, idx){
($scope.profile.type == 2) ? (idx >= 0) ? $scope.sports[sport.sport_id] + ", " : $scope.sports[sport.sport_id] : ''
}
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>
I'm trying to do a filter on angular, it's working if I just do a ng-repeat but when I try this code:
<div class="row" ng-repeat="article in articles track by $index" ng-if="$index % 3 == 0">
<div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2] | filterByType:typeOfPost" ng-if="articles[i] != null">
<div class="thumbnail">
<p><img class="pageImage" ng-src="{{articles[i].pageImage}}"></p>
</div>
</div>
</div>
it removes all the data.
I'm not sure how to set this filter in order to get the columns filtered by the post type.
Basically what I have is this:
Dropdown button > Sort by photo / author
X X X
X X X
X X X
(X is an article)
However, right now it's not filtering it correctly
(I'm also using bootstrap)
Not a duplicate:
I can pass the values, the articles are showing, what I can't do is filter them correctly since they are inside a ng-repeat. Usually I'd just do {{article.pageImage}} with the filter in ng-repeat="article in articles", but here it's not working
Ended up filtering the information inside the controller as per Amit's suggestions in the comments:
$scope.setTypePost = function(post) {
$scope.typeOfPost = post;
if (post === 'all') {
$scope.articles = $scope.articles2;
} else {
$scope.articles = $filter('filter')($scope.articles2, {typeOfPost:$scope.typeOfPost}, true);
}
}
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?