<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] : ''
}
Related
I have a set of strings displayed in front end.
The order of the string is displayed as 1,2,3,4,3A,3B,3C
But I want the order to be displayed as 1,2,3,3A,3B,3C,4
If an alphabet is found associated with the number, then that should be displayed first.
How can I achieve this in angular.
To display as 1,2,3,4,3A,3B,3C
I am getting the values in a array as shown below.
<span ng-repeat="x in numbers[0] | orderBy:x:reverse" ng-if="x.selected">
{{x.value}}{{$last ? '' : ', '}}
</span>
<span ng-repeat="x in alphabeticalnumbers[1] | orderBy:x:reverse" ng-if="x.selected">
{{x.value}}{{$last ? '' : ', '}}
</span>
Here is a working fiddle:
https://jsfiddle.net/mtp0kcdd/16/
In your html you could simply concat both the array's first and then apply a orderBy as below:
<span ng-repeat="x in numbers[0].concat(alphabeticalnumbers[1]) | orderBy:x">
{{x}}
</span>
If your:
numbers[0] = ['1','2','3','4','A','B','C'];
and
alphabeticalnumbers[1] = ['3A','3B','3C'];
are the above array's.
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.
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);
}
}
How to conditionally apply a class based on the character count of the model?
E.g.:
$scope.sample = 555;
<span ng-class="{ 'char3': sample.length == 3 }">{{ sample }}</span>
You can convert sample to string and the check its length:
<span ng-class="{ char3: (sample + '').length == 3 }">{{ sample }}</span>
<span ng-class="(sample.length === 3) ? 'three':'notthree'">{{ sample }}</span>
In my code, based on the result, I am displaying the message using
<span ng-if="data.length >= 1" class="badge badge-success">{{data.length}}</span>
<span ng-if="data.length == 0" class="badge badge-error">{{data.length}}</span>
2 Doubts :
First:
<ng-pluralize count="data.length" offset=2
when="{'0' : 'No driver. :-(',
'1' : ' driver !',
'2' : ' {{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} driver !',
'other': ' {{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} and {} others.'}">
</ng-pluralize>
Above code displays :
Found: 13 Sebastian, Fernando and 11 others.
I know that the first green oval is from <span /> tag with class "badge badge-success",
What if I Want to color the other integer value (11) to
<span class="badge badge-warning">11</span>
I mean I should get the result like :
Second:
<!--span ng-class="{ 'badge badge-success' : data.length > 1, badge badge-error }"> {{data.length}}</span--> //Why this is not working ?
Anyways, This I have achieved by using `ng-if` by using 2 span tags, but just for my understanding what is wrong in this span tag conditioning.
I chose an Alternative solution, Used ng-switch
<div ng-switch="data.length">
<div ng-switch-when="0">No drivers. :-(</div>
<div ng-switch-when="1">1 driver!</div>
<div ng-switch-when="2">{{data[0].Driver.givenName}} and {{data[1].Driver.givenName}} driver !</div>
<div ng-switch-default>{{data[0].Driver.givenName}}, {{data[1].Driver.givenName}} and
<span class="badge badge-info">{{data.length - 2}}</span> other !</div>
</div>,
Now it works fines, as I was except for