javascript - 剪切 ng-repeat 中对象参数的字符串长度

Question

我有一个对象列表，其中的所有参数都使用 ng-repeat 显示在表格中。

有时，对象的标题参数会很长，因此会使表格在某些位置拉伸(stretch)。我尝试过使用过滤器，但我认为这会切断表中显示的行，而不是随机对象参数的字符。

有没有办法可以将这个标题 chop 到一定长度并在末尾添加“...”？如果之前有人问过这个问题，我深表歉意，但我的研究没有找到我需要的答案。

Answer 1

您可以编写一个 JavaScript 函数来强制文本的最大长度:

$scope.forceMaxLength = function(s, maxLength) {
     if(s.length > maxLength) {
         return Array.prototype.slice.apply(s, [0, maxLength-3]).join('') + '...';
     } else {
         return s;
     }
}

现在你可以在你的 Angular 模板中使用它:

   <div ng-repeat="item in items">
        <h3>{{ forceMaxLength(item.title, 25) }}</h3>
   </div>

话虽如此，在 CSS 中使用 text-overflow: ellipsis; 可能是更好的解决方案。

这样做的原因是文本的宽度由每个字符的宽度之和组成，并且字符宽度可能会有所不同。

这两个字符串都有 34 个字符:

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

如果您想 chop 这些字符串以使它们适合给定的宽度，您可能希望 chop 点位于各个字符串中的不同位置。