angularjs - 如何在 AngularJS 中限制 ng-bind-html 中的字符数？

Question

如何限制 ng-bind-html 导致 angularJS 的字符数？可能吗？

例如，<span>some text </span>在 js 文件中有$sce并ng-bind-html转换为 html。

我想展示som..。我该如何限制它？

Answer 1

您可以在控制器中使用 limiTo 过滤器 - limitTo过滤器。

控制器：

app.controller('myCtrl', ['$scope','$sce','$filter',
function($scope, $sce, $filter) {
    var dataObj = [];        
    for(var i = 0; i < data.length; i++){

        var content = $filter('limitTo')(data[i].Content, 150)
        var itemObj = {
            Content: $sce.trustAsHtml(content)
        }
        dataObj.push(itemObj);
    }
    $scope.ngRepeatArray = dataObj;  
}])

HTML

<ul>
    <li ng-repeat="item in ngRepeatArray">
          <p ng-bind-html="item.Content"></p>
    </li>
</ul>

希望这可以帮助。

Answer 2

AngularJS 限制使用 HTML 标签

@Sericaia 有一个很好的答案

她创建了一个自定义过滤器，如下所示：

angular.module('limitHtml', [])
    .filter('limitHtml', function() {
        return function(text, limit) {

            var changedString = String(text).replace(/<[^>]+>/gm, '');
            var length = changedString.length;

            return length > limit ? changedString.substr(0, limit - 1) : changedString;
        }
    });

然后在视图中使用它：

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>

Answer 3

Maybe you need to do some CSS tricks on your model represenation in html. For example if you have long text you can limit number of lines like here Limit text length to n lines using CSS

Answer 4

要在截断文本的末尾添加“阅读更多”或“...”，我对@Yeysides 的答案添加了一个小调整，扩展了@Sericaia 的“AngularJS limitTo using HTML tags”。

使用带有suffix字符串的变量，然后调用它。

angular.module('limitHtml', [])
    .filter('limitHtml', function() {
        return function(text, limit) {

            var changedString = String(text).replace(/<[^>]+>/gm, '');
            var length = changedString.length;
            var suffix = ' ...';

            return length > limit ? changedString.substr(0, limit - 1) + suffix : changedString;
        }
    });

然后在视图中使用它：

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>