我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
当前回答
你可以使用这个npm模块:https://github.com/sparkalow/angular-truncate
将截断过滤器注入到你的应用模块中,如下所示:
var myApp = angular.module('myApp', ['truncate']);
在你的应用程序中这样应用过滤器:
{{ text | characters:20 }}
其他回答
我知道这有点晚了,但在angularjs的最新版本(我使用的是1.2.16)中,limitTo过滤器支持字符串和数组,所以你可以像这样限制字符串的长度:
{{ "My String Is Too Long" | limitTo: 9 }}
它将输出:
My String
我也遇到过类似的问题,我是这样做的:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
我发现限制字符串长度的最简单的解决方案是{{modal。title | slice:0:20}},然后借用上面的@Govan,你可以使用{{modal.title.length > 20 ?“…': "}}如果字符串长于20,则添加挂起点,因此最终结果很简单:
{{模态。Title | slice:0:20}}{{modal.title.length > 20 ?“…': "}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
这可能不是来自脚本末尾,但你可以使用下面的css并将这个类添加到div中。这将截断文本,并在鼠标悬停时显示全文。你可以添加更多的文本,并添加一个角点击手柄来改变cli上的div类
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}
你可以使用这个npm模块:https://github.com/sparkalow/angular-truncate
将截断过滤器注入到你的应用模块中,如下所示:
var myApp = angular.module('myApp', ['truncate']);
在你的应用程序中这样应用过滤器:
{{ text | characters:20 }}