如何在AngularJS中截断messageText？ [复制]

Posted 2023-02-27

【中文标题】如何在AngularJS中截断messageText？ [复制]

【英文标题】：How to truncate messageText in AngularJS? [duplicate]

【发布时间】：2017-02-18 11:46:44

【问题描述】：

我正在创建一条广播消息，如果显示的消息超出允许的长度，我想将其截断为：

原消息：

some text message that is very very very very very very very very long

变成这样：

some text message.....

这里是代码

<div data-ng-repeat="message in messages | limitTo: limit">
 <label>message.MessageDateTime|ctime|date:'dd MMM yyyy hh:mm:ss a'
 <b>message.MessageSender: </b>message.MessageText</label>
</div>  

【问题讨论】：

你可以使用LimitTo过滤器

为什么不使用css属性：overflow: ellipsis

我只是关注 JanR 发布的帖子 here

【参考方案1】：

您可以简单地使用自己的自定义过滤器。

module.filter('truncate', function () 
        return function (input) 
            if (!input) 
                return '';
             else if (input.length > 10) 
                return input.slice(0,10); //limit to first 10 characters only
            
             else
              return input;
        ;
    )

你可以在html中使用它

<div data-ng-repeat="message in messages | limitTo: limit">
 <label>message.MessageDateTime|ctime|date:'dd MMM yyyy hh:mm:ss a'
 <b>message.MessageSender: </b>message.MessageText | truncate</label>
</div>