如何为一定长度的数组添加省略号？

Question

我有一个场景，其中我有一个包含对象的数组，我需要用逗号分隔该数组。在数组的某些元素之后，我需要添加省略号。

这是我的代码：

<div><b>Eye color:</b><span ng-repeat="eyeAry in eyeClrTxtAry | limitTo:10"> {{eyeAry}}{{$last ? '' : ', '}}
     </span>
    <span ng-if="eyeClrTxtAry.length >5">...</span>
 </div>

以上代码用于添加省略号。我的问题是当长度超过'5'时，省略号被添加到长度为'5'之后的每个元素。我的要求是通过添加省略号（...）来隐藏大于'5'的元素。

Answer 1

将限制设为6并按$ index

添加曲目

<div><b>Eye color:</b><span ng-repeat="eyeAry in eyeClrTxtAry track by $index | limitTo:6"> {{eyeAry}}{{$last ? '' : ', '}}
 </span>
<span ng-if="$index >4">...</span>

Answer 2

如果您不介意输出整个集合，您可以坚持使用CSS解决方案 检查text-overflow属性。

div {
  white-space: nowrap;
  text-overflow: ellipsis;
}