使用逗号作为列表分隔符与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-if 。 ng-show在dom创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"}
