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

【问题标题】：how to limit character number in ng-bind-html in AngularJS?如何在 AngularJS 中限制 ng-bind-html 中的字符数？
【发布时间】：2015-01-28 11:03:12
【问题描述】：

如何限制 ng-bind-html 生成 angularJS 的字符数？有可能吗？

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

我想显示som..。怎么限制？

【问题讨论】：

This 是你的答案！！！挺好看的！！

标签： angularjs ng-bind-html ng-bind

【解决方案1】：

AngularJS limitTo using HTML tags

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

【讨论】：

【解决方案2】：

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

控制器：

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>

希望这会有所帮助。

【讨论】：

【解决方案3】：

也许您需要对 html 中的模型表示做一些 CSS 技巧。例如，如果您有长文本，您可以限制行数，例如 Limit text length to n lines using CSS

【讨论】：

【解决方案4】：

为了在截断文本的末尾添加“阅读更多”或“...”，我对 @Yeysides's answer 进行了小调整，以扩展 @Sericaia's "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>

【讨论】：

这适用于 AngularJS，不适用于 Angular 2。我已经对其进行了测试和部署。您是否检查过过滤器是否被正确触发？
它对我有用，但我确实在控制器范围内为maxNumberOfChar 声明了一个变量。例如$scope.maxNumberOfChar = 100;