Question

我有一个角度表达式，可以解析为一个文本块。

文本块的大小可以是1个字符到3,000个以上。我想为显示的文本数量添加一个限制，并希望在文本的末尾添加一个省略号，或者使用图像或类似<div>...</div>这样的内容。

最好的方法是什么？

是否有一种有角度的方式来实现这一点，或许是某种过滤器？

或者指令是更好的方法吗？

<div text-length-limit>{{description}}</div>

Answer 1

你可以这样做：

{{description | limitTo: 5}}<span ng-show="description.length > 5">...</span>

limitTo将字符串限制为所需的长度（此处为5），如果原始字符串高于该长度，则显示...

Answer 2

过滤器非常适合将值格式化为另一个值，但保持相同的类型。在这种情况下，如果字符串的长度超过给定长度，则需要一个添加省略号（...）的过滤器。

var app = angular.module('app',[]);

    app.filter('ellipsis', function() {
        return function(val, maxLength) {
           if (val && val.toString().length > maxLength) {
               return val.toString().substring(0, maxLength) + '...';
           }
           return val;
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app">
  Type text longer than 5 characters: <input type="text" ng-model="text" /> {{text | ellipsis:5}}
</div>

将最大字符长度放在角度表达式上并添加省略号

2 个答案: