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

Since this question is quite old and AngularJS had had time to evolve since then, this can now be easily achieved using:

<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>.

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_

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_

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>_x000D_
<div ng-app="myApp" ng-controller="MyCtrl">_x000D_
  <ul>_x000D_
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>_x000D_
  </ul>_x000D_
</div>

_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

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

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

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

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

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

[angularjs] Using comma as list separator with AngularJS

Examples related to angularjs

Examples related to angularjs-ng-repeat