Limit text size by lines in angular ng-repeat

Question

I want to limit the number of lines that a <p> can have, based on a text in ng-repeat, my ng-repeat loop:

<ul class="list-unstyled">
     <li ng-repeat="comment in ad.comments>
          <p id="moreButton"> {{comment.text | limitTo: CommentTextLimit}}
               <a ng-show="comment.text.length>25"> <span id="moreLess" span ng-click="changeLength(CommentTextLimit)" >{{moreLessText}}</span></a>           
          </p>
     </li>
</ul>

I want to limit the comment.text field and if the user clicks on the show more button more lines will appear, the first problem is that any changes apples to all comments instead of one, the second one is that I want to limit by rows and not by comment.text.length

score 1 · Accepted Answer · edited May 23 '17 at 10:27

In the past I have used 2 different techniques to solve this. Sometimes I would just concatenate the length of the string according to a fixed length.

Since you said you don't want to use this technique, The other way I did it a few times, was adding the css style max-height and overflow:hidden to the bounding element.

Then you can create a directive that will detect the actual height of the element, and tell if part of the element is hidden because of the max-height.
(You can do this like this : https://stackoverflow.com/a/143889/230377)

If the element is "overflowing" then it means part of the text is hidden, and then I would display a "see more" link at the bottom right corner of the bounding element.
I would place this element in the bottom right corner by using css (and not just adding it inline)

The css of the "see more" element should look something like this :

.see-more-link {
  position:absolute;
  bottom:0; right:0;
}

You also need to set the bounding element to have position:relative.

Sorry, I wanted to add a link to a working example of this in one of my github repos, but I can't find it now... Hope this helps.

score 1 · Answer 2 · edited Nov 16 '15 at 14:26

1

So you seem to have two problems here:

Limiting your no. of lines in the <p> tag: Well for this you can either try what has been suggested in the previous comment or maybe you can play with track by $index option in your ng-repeat.
Change getting applied to all the comments: In you ng-click method pass the id/object of the element you want to apply the changes to. Create/Define IDs using $index feature of ng-repeat.

edited Nov 16 '15 at 14:26

Mr Lister

45,515
15
108
150

answered Nov 09 '15 at 13:31

Sachin Siwach

90
1
10

– Sachin Siwach Nov 09 '15 at 14:27
Did you mean id="comment"{{$index}}" ? – Itsik Mauyhas Nov 09 '15 at 14:38
No, Do not put inverted comma between the comment and {{$index}} as per my code snippet after you load the page you can check that the ids generated would be like cmmnt0, cmmnt1, cmmnt2 etc. this will help you in applying your operation at the specific comment only. – Sachin Siwach Nov 09 '15 at 14:50
That works but when I console/log('cmmnt'+$index) I get an empty object. – Itsik Mauyhas Nov 09 '15 at 14:56
True, because its just an id of your li element if you want to check the object then pass this keyword as parameter in your 'changeLength(this);' function and receive it as an object in your function implementation. For that you can put a debugger and check the properties of the received object. – Sachin Siwach Nov 09 '15 at 15:01
I still didnt find out the way to apply css by the ID. – Itsik Mauyhas Nov 10 '15 at 10:36

Limit text size by lines in angular ng-repeat

2 Answers2