Using comma as list separator with AngularJS

Question

I need to create a comma-separated list of items      lt li ng-repeat  friend in friends  gt         lt b ng-repeat  email in friend email  gt   email     last               lt  b gt        lt  li gt    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    lt span ng-show    last  gt    lt  span gt

User · Answer

Also   angular module  App filters            filter  joinBy   function              return function  input delimiter                return  input        join delimiter                               And in template      itemsArray   joinBy

User · Answer

You can use CSS to fix it too   lt div class  some-container  gt     lt span ng-repeat  something in somethings  gt   something   lt span class  list-comma  gt    lt  span gt  lt  span gt     lt  div gt    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

User · Answer

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  lt span ng-if    last  gt    lt  span gt  seems like a great way to do it   It s simple

User · Answer

Just use Javascript s built-in join separator  function for arrays    lt li ng-repeat  friend in friends  gt     lt b gt   friend email join         lt  b gt      lt  li gt

User · Answer

I like simbu s approach  but I ain t comfortable to use first-child or last-child  Instead I only modify the content of a repeating list-comma class    list-comma    list-comma  before       content             lt span class  list-comma  ng-repeat  destination in destinations  gt        destination name    lt  span gt

User · Answer

Since this question is quite old and AngularJS had had time to evolve since then  this can now be easily achieved using     lt li ng-repeat  record in records  ng-bind  record     last               gt  lt  li gt    Note that I m using ngBind instead of interpolation       as it s much more performant  ngBind  will only run when the passed value does actually change  The brackets        on the other hand  will be dirty checked and refreshed in every  digest  even if it s not necessary  Source  here  here and here    x000D   x000D  angular x000D     module  myApp       x000D     controller  MyCtrl      scope   x000D      function  scope    x000D         scope records    1  2  3  4  5  6  7  8  9  10   x000D        x000D        x000D  li   x000D    display  inline-block  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 5 7 angular min js  gt  lt  script gt  x000D   lt div ng-app  myApp  ng-controller  MyCtrl  gt  x000D     lt ul gt  x000D       lt li ng-repeat  record in records  ng-bind  record     last               gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    On a final note  all of the solutions here work and are valid to this day  I m really found to those which involve CSS as this is more of a presentation issue

User · Answer

If you are using ng-show to limit the values  the    last               won t work since it will still take into consideration all the values Example   lt div ng-repeat  x in records  ng-show  x email    1  gt   x     last               lt  div gt   var myApp   angular module  myApp        myApp controller  myCtrl   function  scope       scope records           email    1          email    1          email    2          email    3             Results in adding a comma after the  last  value since with ng-show it still takes into consideration all 4 values    email   1      email   1      One solution is to add a filter directly into ng-repeat   lt div ng-repeat  x in records   filter    email    1      gt   x     last               lt  div gt    Results    email   1      email   1

User · Answer

You could do it this way    lt b ng-repeat  email in friend email  gt   email     last               lt  b gt     But I like Philipp s answer  -

User · Answer

x000D   x000D   list-comma  before   x000D    content       x000D    x000D   list-comma first-child  before   x000D    content      x000D    x000D   lt span class  list-comma  ng-repeat  destination in destinations  gt  x000D                                destination name   x000D                           lt  span gt  x000D   x000D   x000D

[angularjs] Using comma as list separator with AngularJS

Examples related to angularjs

Examples related to angularjs-ng-repeat