我有以下几点:

<div>{{modal.title}}</div>

有没有一种方法可以限制字符串的长度,比如20个字符?

一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过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

其他回答

我也遇到过类似的问题,我是这样做的:

{{ 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

使用自定义Angular过滤器限制字数: 下面是我如何使用Angular过滤器来限制使用自定义过滤器显示的字数。

HTML:

<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>

角/ Javascript代码

angular.module('app')
.filter('limitWordsTo', function () {
    return function (stringData, numberOfWords) {
        //Get array of words (determined by spaces between words)
        var arrayOfWords = stringData.split(" ");

        //Get loop limit
        var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords;

        //Create variables to hold limited word string and array iterator
        var limitedString = '', i;
        //Create limited string bounded by limit passed in
        for (i = 0; i < loopLimit; i++) {
            if (i === 0) {
                limitedString = arrayOfWords[i];
            } else {
                limitedString = limitedString + ' ' + arrayOfWords[i];
            }
        }
        return limitedString;
    }; 
}); //End filter

由于只在字符串长度超过限制时才需要省略号,因此使用ng-if添加省略号似乎比使用绑定更合适。

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

如果你有两个绑定{{item.name}}和{{item.directory}}。

并且希望将数据显示为一个后跟名称的目录,假设目录为“/root”,名称为“Machine”(/root- Machine)。

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}