current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 120 down vote favorite
28

I need to create a comma-separated list of items:

  <li ng-repeat="friend in friends">
      <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
  </li>

According to the AngularJS documentation, no control flow statements is allowed in expressions. This is why my {{$last ? '' : ', '}} does not work.

Is there an alternative way to create comma-separated lists?

EDIT 1
is there something simpler than:

<span ng-show="!$last">, </span>
share|improve this question
1  
You can always use CSS to format lists in this way (then you don't need to modify HTML when your boss wants them on separate lines etc) - see stackoverflow.com/questions/1517220/… – AlexFoxGill Sep 2 '15 at 15:25
up vote 210 down vote accepted

You could do it this way:

<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>

..But I like Philipp's answer :-)

share|improve this answer
    
Shouldn't ($last && '' || ', ') always yield ', '? – okm May 15 '13 at 11:02
12  
LIke okm above, I couldn't get angular to properly evaluate $last to true or false within a template. I used this: {{{true: '', false: ', '}[$last]}}. This technique is more flexible than using .join because it allows the elements in the list to each be members of an array, like: <b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b> – Ryan Marcus May 25 '13 at 20:25
3  
Updated to use ternary operators – Andrew Joslin Oct 17 '13 at 15:05
1  
How can i insert and in the printed array so that my array looks like this : John, Mike and Nil. How to get this format without using directive. – MaTya Jul 29 '14 at 12:12
1  
its so simmmmmple – Kristian Oct 9 '14 at 23:00
up vote 155 down vote

Just use Javascript's built-in join(separator) function for arrays:

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>
share|improve this answer
    
nice, but now just imagine you want to use a red coma ... – Soubok Jul 18 '12 at 12:48
17  
If you want HTML-ish separators it's probably time to a write directive. You could also put HTML into join() and disable HTML escaping, but there's a special place in hell for that ;) – Philipp Reichart Jul 18 '12 at 13:07
    
Nice, I didn't even think about using it this way. – Strawberry Jul 18 '13 at 15:12
    
@DavidKEgghead I beg to differ, jsfiddle.net/wuZRA. How does it not work for you? – Philipp Reichart Jan 28 '14 at 23:14
2  
@PhilippReichart sorry for the delay. Here is an example: jsfiddle.net/Sek8F -- looks like you are targeting a string where as I am referring to an object. – Ravi Ram Feb 11 '14 at 0:25
up vote 72 down vote

Also:

angular.module('App.filters', [])
    .filter('joinBy', function () {
        return function (input,delimiter) {
            return (input || []).join(delimiter || ',');
        };
    });

And in template:

{{ itemsArray | joinBy:',' }}
share|improve this answer
9  
This answer shows "angular way" and should be marked as the best. – Eugene Griaznov Sep 16 '14 at 8:18
10  
Why not save six lines and just do {{ itemsArray.join(', ') }}? – Philipp Reichart Feb 4 '15 at 20:20
9  
I'm not sure re-writing JavaScript core functions in AngularJS is really "the Angular way"... – Michael Cole Apr 2 '15 at 5:02
1  
This answer shows how Angular can add value for arrays of objects – Michael Cole Apr 2 '15 at 5:27
up vote 16 down vote 

.list-comma::before {
  content: ',';
}
.list-comma:first-child::before {
  content: '';
}
<span class="list-comma" ng-repeat="destination in destinations">
                            {{destination.name}}
                        </span>

share|improve this answer
    
This seems to the most "semantic" way, as the choice of using a comma-separated list is entirely about presentation. It could just as well have been a sublist. – 3noch Nov 25 '15 at 20:48
up vote 7 down vote

You can use CSS to fix it too

<div class="some-container">
[ <span ng-repeat="something in somethings">{{something}}<span class="list-comma">, </span></span> ]
</div>

.some-container span:last-child .list-comma{
    display: none;
}

But Andy Joslin's answer is best

Edit: I changed my mind I had to do this recently and I ended up going with a join filter.

share|improve this answer
1  
I'd go for a custom filter too, but I like your idea :) – JBC Oct 17 '14 at 5:39
up vote 2 down vote

I think it's better to use ng-if. ng-show creates an element in the dom and sets it's display:none. The more dom elements you have the more resource hungry your app becomes, and on devices with lower resources the less dom elements the better.

TBH <span ng-if="!$last">, </span> seems like a great way to do it. It's simple.

share|improve this answer
    
I like this approach, as it's simple and still supports html based separators. Thanks @the7erm! – alexkb Mar 3 at 1:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.