添加三个点ngbind

Question

我有一个像这样的字符串：

<a href="#" ng-bind="::MyString | limitTo:40"></a> 

但我只需要长度大于40多个字符串后添加三个点，我该怎么办呢？

Answer 1

这是写在ES6，但是这个过滤器将让你做你需要的东西：

import * as _ from 'lodash'; 
/* @ngInject */ 
export default() => (input, length) => 
    _.size(input) > length ? 
    `${input.slice(0, length)}...` : input; 

然后你可以使用它作为一个过滤器：

<span data-ng-bind="foo | ellipsis-filter: 20"> 

它限制为20个字符，为您添加省略号。

Answer 2

如果你想解决它在模板而不自己创建一个过滤器，你可能只是这样做：

<a href="#" ng-bind="(MyString | limitTo:40) + (MyString.length > 40 ? '...' : '')"></a> 

不是幻想，创建自己的过滤器，但应该做的伎俩。

Answer 3

正如评论，你应该使用CSS来实现这一点。这将确保您的数据不会改变，并保持UI美学。

此外，每个角色都有不同的宽度。最好检查总宽度比字符长度。

.limit { 
 
    width: 200px; 
 
    text-overflow: ellipsis; 
 
} 
 
.ellipsis { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    width: 100px; 
 
    white-space: nowrap; 
 
}

<input type="text" class="limit"> 
 

 
<div class="ellipsis"> 
 
    <a href="#">This is a test for ellipsis using CSS</a> 
 
</div>