web-dev-qa-db-fra.com

Utiliser une virgule comme séparateur de liste avec AngularJS

Je dois créer une liste d'éléments séparés par des virgules:

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

Selon la documentation AngularJS, aucune instruction de flux de contrôle n'est autorisée dans les expressions. C'est pourquoi mon {{$last ? '' : ', '}} ne fonctionne pas.

Existe-t-il un autre moyen de créer des listes séparées par des virgules?

EDIT 1
Y a-t-il quelque chose de plus simple que:

<span ng-show="!$last">, </span>
angularjsangularjs-ng-repeat
177
Franck Freiburger

Vous pouvez le faire de cette façon:

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

..Mais j'aime la réponse de Philipp :-)

332
Andrew Joslin

Utilisez simplement la fonction join(separator) pour les tableaux:

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>
221
Philipp Reichart

Également:

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

Et dans le template:

{{ itemsArray | joinBy:',' }}
97
sanusart

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

39
simbu

Vous pouvez aussi utiliser CSS pour y remédier

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

Mais la réponse d'Andy Joslin est la meilleure

Edit: J'ai changé d'avis, je devais le faire récemment et j'ai fini par utiliser un filtre de jointure.

10
Chris Stephens

Je pense qu'il vaut mieux utiliser ng-if. ng-show crée un élément dans la dom et le définit display:none. Plus vous avez d'éléments dom, plus votre application prend de ressources, et sur les appareils disposant de ressources plus faibles, moins d'éléments dom seront optimaux.

TBH <span ng-if="!$last">, </span> semble être un excellent moyen de le faire. C'est simple.

5
the7erm

Puisque cette question est assez ancienne et que AngularJS a eu le temps d’évoluer depuis, il est désormais facile d’y parvenir grâce à: 

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

Notez que j'utilise ngBind au lieu d'interpolation {{ }} car il est beaucoup plus performant:ngBind ne s'exécutera que lorsque la valeur transmise changera réellement. Les parenthèses {{ }}, par contre, seront vérifiées et actualisées dans chaque $ digest, même si cela n’est pas nécessaire. Source: ici , ici et ici .

angular
  .module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
  ]);
li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
  </ul>
</div>

Sur une note finale, toutes les solutions ici fonctionnent et sont valables à ce jour. Je suis vraiment trouvé à ceux qui impliquent CSS, car il s’agit plus d’un problème de présentation.

2
Cosmin Ababei

J'aime l'approche de simbu, mais je ne suis pas à l'aise d'utiliser premier enfant ou dernier enfant. Au lieu de cela, je ne modifie que le contenu d'une classe répétée liste-virgule.

.list-comma + .list-comma::before {
    content: ', ';
}

<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>
1
Durrahan

Si vous utilisez ng-show pour limiter les valeurs, le {{$last ? '' : ', '}} ne fonctionnera pas, car il tiendra toujours compte de toutes les valeurs.Exemple

<div ng-repeat="x in records" ng-show="x.email == 1">{{x}}{{$last ? '' : ', '}}</div>

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

Résultats en ajoutant une virgule après la "dernière" valeur , car avec ng-show, il prend toujours en compte les 4 valeurs

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

Une solution consiste à ajouter un filtre directement dans ng-repeat

<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>

Résultats

{"email":"1"},
{"email":"1"}
0
Mihai