Usando coma como separador de listas con AngularJS

Necesito crear una lista de elementos separados por comas:

  • {{email}}{{$last ? '' : ', '}}...
  • De acuerdo con la documentación de AngularJS, no se permiten enunciados de flujo de control en las expresiones. ¿Por eso mi {{$last ? '' : ', '}} {{$last ? '' : ', '}} no funciona.

    ¿Hay alguna manera alternativa de crear listas separadas por comas?

    EDIT 1
    ¿hay algo más simple que:

     ,  

    Podrías hacerlo de esta manera:

    {{email}}{{$last ? '' : ', '}}

    ..Pero me gusta la respuesta de Philipp 🙂

    Simplemente use la función de join(separator) Javascript join(separator) para matrices:

     
  • {{friend.email.join(', ')}}...
  • También:

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

    Y en plantilla:

     {{ itemsArray | joinBy:',' }} 
     .list-comma::before { content: ','; } .list-comma:first-child::before { content: ''; } 
      {{destination.name}}  

    Puedes usar CSS para arreglarlo también

     
    [ {{something}}, ]
    .some-container span:last-child .list-comma{ display: none; }

    Pero la respuesta de Andy Joslin es la mejor

    Editar: Cambié de opinión. Tuve que hacer esto recientemente y terminé yendo con un filtro de combinación.

    Creo que es mejor usar ng-if . ng-show crea un elemento en el dom y establece su display:none . Mientras más elementos dom tengas, más recursos consume tu aplicación, y en dispositivos con menos recursos, menos elementos dom , mejor.

    TBH , parece una excelente manera de hacerlo. Es sencillo.

    Como esta pregunta es bastante antigua y AngularJS tuvo tiempo de evolucionar desde entonces, ahora se puede lograr fácilmente utilizando:

  • .

    Tenga en cuenta que estoy usando ngBind lugar de la interpolación {{ }} ya que es mucho más ngBind : ngBind solo se ejecutará cuando el valor pasado realmente cambie. Por otro lado, los corchetes {{ }} se verán sucios y actualizados en cada $ digest, incluso si no es necesario. Fuente: aquí , aquí y aquí .

     angular .module('myApp', []) .controller('MyCtrl', ['$scope', function($scope) { $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; } ]); 
     li { display: inline-block; } 
      

    Si está usando ng-show para limitar los valores, {{$last ? '' : ', '}} {{$last ? '' : ', '}} no funcionará, ya que tomará en consideración todos los valores. Ejemplo

     
    {{x}}{{$last ? '' : ', '}}
    var myApp = angular.module("myApp", []); myApp.controller("myCtrl", function($scope) { $scope.records = [ {"email": "1"}, {"email": "1"}, {"email": "2"}, {"email": "3"} ] });

    Resulta en agregar una coma después del “último” valor , ya que con ng-show aún toma en consideración los 4 valores

     {"email":"1"}, {"email":"1"}, 

    Una solución es agregar un filtro directamente en ng-repeat

     
    {{x}}{{$last ? '' : ', '}}

    Resultados

     {"email":"1"}, {"email":"1"}