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"}