Get short text of HTML string using AngularJS

Question

I'd like to get the text of an HTML string using AngularJS filters but it seems not working with my code.

My code :

app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});

app.filter('short', function() {
    return function(short, length) {
        return short.substr(0, length || 20)+'...';
   }
});

My template :

<p ng-bind-html="event.description | unsafe | short"></p>

Edit #1 :

Error: [$injector:unpr] Unknown provider: unsafeFilterProvider <- unsafeFilter

ccjmne · Accepted Answer · 2015-12-01 13:37:37Z

4

Simply put, here's your problem:
$sce.trustAsHtml does not return a string, and thus, the returned object does not have the substr prototype function you're trying to use in your short filter, after unsafe.

Here's a quote from AngularJS's documentation for $sce.trustAs:

[...] returns an object that is trusted by angular for use in specified strict contextual escaping contexts [...] that uses the provided value.

Just make it:

<!-- "short" filter before "unsafe" -->
<p ng-bind-html="event.description | short | unsafe"></p>

... instead of:

<p ng-bind-html="event.description | unsafe | short"></p>

... and you're good to go!

Here's a working JSFiddle for illustration.

edited Dec 1, 2015 at 13:37

answered Dec 1, 2015 at 13:32

ccjmne

9,6213 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pjetr Over a year ago

But also, be mindfull, because allowing HTML and just cutting it off could be quite dangerous for your layout. So I would actually advise against allowing HTML in this case.

tonymx227 Over a year ago

Ok, and Is that possible to get only the text using something like $('p').text() with jQuery?

Pjetr Over a year ago

I just watched the JSFiddle, and simply added some lorem, only the three dots were bold, so there seems to be no (real) issue. You should indeed be able to just show the text using angular.element(short).text().substr(0, 20) + '…'

Pjetr Over a year ago

I just updated the fiddle with some extra checks: jsfiddle.net/dhvo3pf4/1

İsmail Şener · Accepted Answer · 2015-12-01 13:31:53Z

-1

AngularJS filters got 2 arguments which is input and $scope

app.filter('customFilter', function () {
  return function (input, scope) {
    var manipulatedInput = (input * 2) / 5;
    return manipulatedInput;
  };
});

You can got them like this snippet. Hope it helps!

answered Dec 1, 2015 at 13:31

İsmail Şener

4232 gold badges6 silver badges14 bronze badges

Collectives™ on Stack Overflow

Get short text of HTML string using AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related