使用逗号作为列表分隔符与AngularJS

我需要创build一个逗号分隔的项目列表:

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

根据AngularJS文档,在expression式中不允许控制stream程语句。 这就是为什么我的{{$last ? '' : ', '}} {{$last ? '' : ', '}}不起作用。

有没有其他的方法来创build逗号分隔列表?

编辑1
有没有比这更简单的事情:

 <span ng-show="!$last">, </span> 

你可以这样做:

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

但是我喜欢Philipp的回答:-)

只需使用Javascript的内置join(separator)函数为数组:

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

也:

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

在模板中:

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

你也可以使用CSS来修复它

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

但是安迪·乔斯林的答案是最好的

编辑:我改变了我的想法,我不得不这样做最近,我结束了joinfilter。

我认为最好使用ng-ifng-showdom创build一个元素并将其设置为display:none 。 您的应用程序变得越多资源越多,在资源越低的设备上,越less的元素越好。

TBH <span ng-if="!$last">, </span>似乎是一个很好的方法。 这很简单。

由于这个问题是相当古老的,AngularJS从那时起就有时间发展,现在可以通过以下方式轻松实现:

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

请注意,我使用的是ngBind而不是插值{{ }}因为它的性能要高得多: ngBind将只在传递值实际发生更改时才运行。 另一方面,括号{{ }}将在每个摘要中被检查并刷新,即使没有必要。 来源: 这里 , 这里和这里 。

 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> 

如果你正在使用ng-show来限制这个值,那么{{$last ? '' : ', '}} {{$last ? '' : ', '}}因为它仍将考虑所有的值,所以不能工作

 <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"} ] }); 

结果在“最后”值之后加一个逗号 ,因为在ng-show中它仍然考虑所有4个值

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

一种解决scheme是直接在ng-repeat中添加一个filter

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

结果

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