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

Question

I am trying to limit the characters i see on my angular js app. Currently i am using:

Answer 1

I don't think that will work with ng-bind-html. This is for binding actual html code to the page. ng-bind should work fine.

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

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

EDIT:

Since you do have HTML code in it, you'll need to use ngSanitize. You can read about that here: https://docs.angularjs.org/api/ngSanitize

Add the reference to angular-sanitize.js, then import it into the app

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

Then your original code should work fine, although it's likely parts of it will be cut off, including ending tags, so you'll need to deal with that.

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

Answer 2

integrate this link :

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

check if you have sanitize here

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

in your html you macke this code :

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

Answer 3

In your controller

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

In your html

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

Answer 4

You can use custom directive and filters which will work same as ng-bind-html

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

directive:

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

Truncate with ellipsis:

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

you need to use custom filter(limitWithEllipsis) with above directive

.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('....');
                  }
                }
            };
        })

Answer 5

Inject $sce into your controller and then use it like below:

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

In your html

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

Answer 6

If none of the answers above didn't satisfy you, how about the following approach?

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;
  }
});

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