AngularJS：如何使用limitTo仅在字符串超出限制时显示椭圆

我正在使用limit对一些字符串进行过滤。如果字符串少于（比如）10个字符，则该字符串将按原样显示。如果字符串长度超过10个字符，我希望在第10个字符处截断字符串后显示省略号。这样做有没有捷径？谢谢

例如：

{{main.title | limitTo:10}}

如果main.title=“A Good Day”，则输出为：A Good Day

---

如果main.title=“糟糕的一天”，则输出将是：糟糕的…

如果需要，可以为此构建一个过滤器，但我将使用

ngIf

指令，如下所示：

（函数（）{
"严格使用",；
角度.module（'app'，[]）
.controller（'mainCtrl'，function（）{
var vm=这个；
vm.text='实际长度超过10'；
});
})();

无限制地：

有限制：
...
由于已经发布了使用angularjs的其他答案，我将为您提供一个简单的css技术


（函数（）{
“严格使用”；
角度.module（'app'，[]）
.controller（'mainCtrl'，函数（$scope）{
$scope.text=“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书”；
});
})();
span.省略号{
显示：内联块；
宽度：180px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

{{text}}
希望这有助于：

{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}

使用
{{text | limito:limit}}

您需要定义一个css类
。省略号：在{content:'…'；}
之后和一个作用域变量
limit

或

{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}


（函数（）{
“严格使用”；
角度.module（'app'，[]）
.controller（'mainCtrl'，函数（$scope）{
$scope.text=“你好世界”；
$scope.limit=10；
});
})();
。省略号：在{content:'…'；}

使用选项1
{{text | limito:limit}


使用选项2
{{text.length>limit？（（text | limitTo:limit）+“…”）：text}
如果有人想在控制器中使用省略号逻辑，那么下面的代码片段将非常有用：

$filter('limitTo')(input, limit) + (input.length > limit ? '…' : '');

其中，
input
和
limit
将是“输入字符串”和数字限制值，例如

$filter('limitTo')(stringText, 20) + (stringText.length > 20 ? '…' : '');

<> P.将来阅读的人可以考虑使用CSS代替JS。比如：

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

基于
limito
编写自己的过滤器是最好的方法

angular.module('your-module-name').filter('dotsFilter', [
    '$filter',
    function ($filter) {
        /**
         * Shorten the input and add dots if it's needed
         * @param {string} input 
         * @param {number} limit
         */
        function dotsFilter(input, limit) {
            var newContent = $filter('limitTo')(input, limit);
            if(newContent.length < input.length) { newContent += '...'; }
            return newContent;
        }

        return dotsFilter;
    }
]);


{{row.RequestTitle.length>59？row.RequestTitle.substr（0,59）+'…'：row.RequestTitle}

这是有用的，也可以运行，Angular 5材质UI
很棒。谢谢你的帮助。答案是显而易见的，但它超出了我的理解。你是如何限制字符数的？我已经根据要求更新了我的答案，请看看它是否适合你span。省略号：{content:''.''}之后，你不应该需要内联块（因为它是span，所以内联块不是内联块）和！重要的是通常不需要这是好的和简单的，你可以做
limito:limit-3
，这与BeingSuman的答案不同，BeingSuman的答案可能会为单个字符添加省略号。我喜欢这个答案比使用另一个跨度和ng要好得多，谢谢这是快速、容易理解的，我建议使用HTML省略号：
…请用4个空格缩进代码块，而不是使用粗体格式。代码块（带4个空格的完整代码块或带反标记的内联代码块）也允许HTML标记，而无需将它们格式化为文章的一部分。我同意这是最好的解决方案：）在不需要使用JS的地方，最好不要使用它
{{ model.longTextData | dotsFilter:10 }}

<div maxlength="59"> 
  {{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}} 
</div>