Easy way to limit characters in ng-bind-html Angular JS

Question

I am trying to limit the characters that I see in my angular js application. I am currently using:

<p ng-bind-html="item.get('Content') | limitTo: 150"></p>  

But no joy, no ideas ...

Answer 1

since you are using ng-bind-html, you will also need it $sce, so my advice is doing this in your controller. In this way

Ctrl.$inject= ['$sce', '$filter', '$scope'];
Function Ctrl($sce, $filter, $scope) {
  $scope.content= $filter('limitTo')(dataWithHtml, 100, 0);
  $scope.content= $sce.trustAsHtml($scope.content);
}

in html you can use like this:

<p ng-bind-html="content"></p>

in this case, I assume that your source data dataWithHtml, 100 is the limit number, 0 is the starting point. See the white papers for more details.

Answer 2

, ng-bind-html. html- . ng-bind .

<p ng-bind="item.get('Content') | limitTo: 150"></p>  

. plunkr http://plnkr.co/edit/y0LXMMFi6sU9AhShvuha?p=preview

EDIT:

HTML-, ngSanitize. : https://docs.angularjs.org/api/ngSanitize

angular -sanitize.js,

var app = angular.module('plunker', ['ngSanitize']);

, , , , , .

. plnkr: http://plnkr.co/edit/y0LXMMFi6sU9AhShvuha?p=preview

Answer 3

:

 <script src="https://code.angularjs.org/1.2.16/angular-sanitize.js"></script>

 ,

var adminApp = angular.module('adminApp', ['ngSanitize', ...,])

html :

<p ng-bind-html="item.get('Content') | limitTo: 150"></td>

Answer 4

$scope.contentText = item.get('Content');

html

<p>{{ contentText | limitTo: 150 }} </p>

Answer 5

$sce , , :

$scope.contentText = $sce.trustAsHtml(item.get('Content')); 

html

<p ng-bind-html="contentText | limitTo: 150"></p>

Answer 6

, sanitize

<p ng-bind-html="message  | limitTo: 150 | sanitize"></p>

Answer 7

, ?

var app = angular.module('myTestNgApp', ['ngSanitize']);

app.controller('myMainTestCtrl', function($scope) {
  $scope.longText = "This is a very loooooooooooooooooooong text";
})
.filter('textShortenerFilter', function() {
  return function(text, length) {
    if (text.length > length) {
      return text.substr(0, length) + "...";
    }
    return text;
  }
});

: - https://jsfiddle.net/anjanasilva/8xk9eL0t/

Answer 8

, , ng-bind-html

<p to-html>{{content | limitTo:200}}</P>

:

.directive('toHtml', function($timeout,$sce) {
   return {
          restrict: 'A',
          link: function($scope, element, attrs, ctrl) {
             $timeout(function() {
                element.html($sce.getTrustedHtml(element[0].innerText) || '');
             }, 200);
          }
         };
})

:

<p to-html>{{content | limitWithEllipsis:200}}</P>

(limitWithEllipsis)

.filter('limitWithEllipsis', function() {
          return function(input, limit, begin) {
              var str='';
                if (Math.abs(Number(limit)) === Infinity) {
                  limit = Number(limit);
                } else {
                  limit = parseInt(limit);
                }
                if (isNaN(limit)) return input;

                if (angular.isNumber(input)) input = input.toString();
                if (!angular.isArray(input) && !angular.isString(input)) return input;
                if(input.length<=limit) return input;
                begin = (!begin || isNaN(begin)) ? 0 : parseInt(begin);
                begin = (begin < 0) ? Math.max(0, input.length + begin) : begin;

                if (limit >= 0) {
                  str=input.slice(begin, begin + limit);
                  return str.concat('....'); 
                } else {
                  if (begin === 0) {
                     str=input.slice(limit, input.length);
                    return str.concat('....');
                  } else {
                     str=input.slice(Math.max(0, begin + limit), begin);
                    return str.concat('....');
                  }
                }
            };
        })