Angular如何将集合以逗号分隔值形式展示？

嘿，这个需求挺常见的，我给你两种实用的实现方式，你可以根据自己的场景选：

方法一：直接用数组join()方法（最简洁） #

如果每个元素不需要单独的复杂样式，完全不用ng-repeat，直接调用数组的join()方法就能搞定：

<span class="value">{{ cc.getRepeatingAttributeValues(col.name).join(', ') }}</span>

这个方法会把你的数组["Consumers","Contributors"]直接转换成Consumers, Contributors这种逗号分隔的字符串，代码量最少，适合大多数简单场景。

方法二：保留ng-repeat并控制逗号（适合需要元素样式的情况） #

要是你得给每个元素保留<span class="value">的样式，那可以借助ng-repeat的内置变量$last来控制逗号的显示——只给非最后一个元素加逗号：

<div>
  <span class="value" ng-repeat="val in cc.getRepeatingAttributeValues(col.name)">
    {{val}}
    <span ng-if="!$last">, </span>
  </span>
</div>

这里的$last是AngularJS给ng-repeat提供的特殊变量，当循环到数组最后一个元素时它会变成true，所以我们只在!$last（不是最后一个元素）的时候渲染逗号。

额外小提醒 #

如果你的数组可能为空，或者getRepeatingAttributeValues()有可能返回undefined，可以加个判断避免报错：

<!-- 方法一的优化版 -->
<span class="value" ng-if="cc.getRepeatingAttributeValues(col.name)?.length">
  {{ cc.getRepeatingAttributeValues(col.name).join(', ') }}
</span>

内容的提问来源于stack exchange，提问作者Divya Neelaiah