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

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

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

根据 AngularJS 文档，表达式中不允许使用控制流语句。这就是为什么我的 {{$last ? '' : ', '}}不工作。

是否有其他方法来创建逗号分隔的列表？

编辑1
还有比这更简单的吗:

<span ng-show="!$last">, </span>
132196 次浏览
小开

只要对数组使用 Javascript 内置的 join(separator)函数:

<li ng-repeat="friend in friends">
<b>\{\{friend.email.join(', ')}}</b>...
</li>
小开
最佳答案

你可以这样做:

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

但我喜欢菲利普的回答: -)

小开

另外:

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

在模板中:

\{\{ itemsArray | joinBy:',' }}
小开

您也可以使用 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;
}

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

编辑: 我改变了主意，最近我不得不这样做，最后我用了一个连接过滤器。

小开 

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

小开

我认为最好使用 ng-if。ng-show在 dom中创建一个元素并将其设置为 display:none。dom元素越多，应用程序对资源的需求就越大，在资源较少的设备上，dom元素越少越好。

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

小开

如果您使用 n- 显示来限制值，那么 \{\{$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"}
]
});

结果是在“ last”值 之后添加一个逗号，因为使用 ng-show 时仍然会考虑所有4个值

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

一种解决方案是将过滤器 直接添加到 ng-repeat 中

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

结果

{"email":"1"},
{"email":"1"}
小开

由于这个问题很古老，而且 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>

最后一点，这里的所有解决方案都是有效的，直到今天仍然有效。我真的发现那些涉及到 CSS，因为这是一个更多的表示问题。

小开

我喜欢 simbu 的方法，但是我不喜欢使用第一个孩子或者最后一个孩子。相反，我只修改一个重复的列表逗号类的内容。

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

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

提交答案