Is there a basic angular directive for read more/less Text

Question

I've been looking into making an angular directive that would shorten a paragraph or a div if it has more than a certain number of characters(115 for example).

I haven't been able to find anything that will work for me, I've seen the http://dotdotdot.frebsite.nl/ and that has worked for some people but I am trying to make it using an angular directive and not JQuery.

If there's any help that someone can offer, it would be greatly appreciated, i am essentially tapped out of ideas.

The is the way my view is setup:

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

I had originally made it work by just having it as jquery like so but it wasn't advisable to just jquery and angular

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

maybe using a custom filter as shown in the answer here: http://stackoverflow.com/questions/18095727/limit-the-length-of-a-string-with-angularjs — MannfromReno, Dec 17 '15 at 17:37
Do you want to hide the additional text or remove the extra text? — Dave M, Dec 17 '15 at 17:39
I was looking to hide the additional text, and then when the more text is clicked, it would show the rest of the text — Veda99817, Dec 17 '15 at 18:17

score 1 · Answer 1 · answered Dec 17 '15 at 17:40

1

A quick google showed this package which would seem to fill your need for specific character limit truncation.

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

NOTE: I did not write/use that directive so I can't speak to it working properly.

answered Dec 17 '15 at 17:40

DaveMC08

61
5

score 1 · Answer 2 · answered Dec 17 '15 at 17:44

1

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

{{ fullString | limitTo: 115 }}

answered Dec 17 '15 at 17:44

Dave M

418
3
15

Yeah i had thought of doing this, but this just cuts the text off, it wouldn't give me any recourse expanding the text on click. – Veda99817 Dec 17 '15 at 18:19

score 1 · Accepted Answer · answered Dec 17 '15 at 18:23

1

I think what you're looking for is ng-class. You can use it to add and remove classes based on a Boolean expression, which is basically what you are doing with your jQuery implementation. For example:

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 modify the more/less link.

Here is a fiddle that shows it working: https://jsfiddle.net/8xjxaz28/

answered Dec 17 '15 at 18:23

Jack A.

4,245
1
20
34

This is exactly what I needed, I implemented what you've laid in the middle there and it's working exactly as i need it. Thank you for your help. – Veda99817 Dec 17 '15 at 18:43
I just had one question, if i wanted it to only show up for when there was text that could be hidden, how would i go about doing this? An example would be if there is a paragraph that's 150 characters long, then the show text would show up allowing for you to click. if there was 60 characters for instance, the text wouldn't show up as it has nothing to hide. – Veda99817 Dec 17 '15 at 18:55
You might want to create your own directive in that case. A directive is typically how you get access to the DOM properties of an element in AngularJS. It's also likely that there are some third-party directives out there that are specifically for doing what you want, but I have not used any of them myself. – Jack A. Dec 17 '15 at 19:13

Is there a basic angular directive for read more/less Text

3 Answers3