как ограничить количество символов в ng-bind-html в AngularJS?

Ограничение 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>

Вы можете использовать фильтр 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>

Надеюсь это поможет.

Возможно, вам нужно сделать некоторые трюки CSS для представления вашей модели в html. Например, если у вас длинный текст, вы можете ограничить количество строк, например здесь Limit длина текста до n строк с использованием CSS

Чтобы добавить «подробнее» или «...» в конце усеченного текста, я добавил небольшую настройку в ответ @Yeysides. расширение @Sericaia "Ограничение AngularJS на использование тегов HTML".

Используйте переменную со строкой 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>