Question

如何限制angularJS中ng-bind-html结果的字符数？有可能吗？

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

我想展示som..。我怎么能限制它？

Answer 1

您可以在控制器中使用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>

希望这有帮助。

Answer 2

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>

Answer 3

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

Answer 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中ng-bind-html中的字符数？

4 个答案: