Is there a basic angular directive to read / reduce text

Question

I am creating an angular directive that shortens a paragraph or div if it contains more than a certain number of characters (e.g. 115).

I was not able to find anything that worked for me, I saw http://dotdotdot.frebsite.nl/ and some people worked, but I am trying to do this using the angular directive, not JQuery.

If there is any help someone can offer, it would be highly appreciated, I am essentially excluded from the ideas.

This is a way to customize my view:

<div class="Description" <div class="Content"> <div data-ng-bind-html="item.Description"></div> </div> 

I initially did this by simply making it like jquery, but just jquery and angular are not recommended

 $(function () { var maxHeight = 115; var moretext = Localization.Shared.InstitutionProfileStrings.ShowMore(); var lesstext = Localization.Shared.InstitutionProfileStrings.ShowLess(); $('.__Description').each(function () { var content = $(this).find(".__Content"); var anchor = $(this).find(".morelink"); if ($(content).height() > maxHeight) { $(this).addClass("less"); $(anchor).html(moretext); $(anchor).show(); } else { $(anchor).hide(); } }); $(".morelink").click(function (e) { e.preventDefault(); var parent = this.parentElement; if ($(parent).hasClass("less")) { $(parent).removeClass("less"); $(this).html(lesstext); $(parent).addClass("more"); } else if ($(parent).hasClass("more")) { $(parent).removeClass("more"); $(this).html(moretext); $(parent).addClass("less"); } return false; }); }); 

Answer 1

I think you are looking for ng-class . You can use it to add and remove classes based on a logical expression, which is basically what you do with the jQuery implementation. For instance:

HTML:

 <div ng-app="testapp" ng-controller="testctrl"> <div class="content" ng-class="{ less: hidden }"> Now is the time for all good men to come to the aid of the party. Now is the time for all good men to come to the aid of the party. Now is the time for all good men to come to the aid of the party. Now is the time for all good men to come to the aid of the party. </div> <button ng-click="hidden = !hidden">{{hidden ? 'Show' : 'Hide'}}</button> </div> 

JS:

 var app = angular.module('testapp', []); app.controller('testctrl', function ($scope) { $scope.hidden = true; }); 

You can use a combination of ng-click and interpolation to change the link to "more / less".

Here is a fiddle showing that it works: https://jsfiddle.net/8xjxaz28/

Answer 2

A quick google revealed this package, which would seem to fill your need for truncating a specific character.

https://github.com/lorenooliveira/ng-text-truncate

NOTE. I did not write / did not use this directive so that I could not work normally with it.

Answer 3

You can simply use the limitTo filter if you want to just cut the text to a specific point (but not actually change the value of the string):

 {{ fullString | limitTo: 115 }}