添加三個點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>