Issue
I am building a post feature in my app. I am using ng repeat on posts and if length > 50 i will show "show more" button. And use will click on show more and will be able to see the text.
**Html**
<div ng-repeat="post in post">
<div class="post-block__content mb-2">
<p>{{post.caption | limitTo: captionLimit}}</p>
<span ng-if="post.caption.length > 50">
<button ng-click="showMore(post.caption)">Show more</button> </span>
</div>
</div>
I want to implement showMore()such that it only show full text for that post only on which i click. But in the above code i am maintaining 'captionLimit' which will make "show more" for every post. Is there any way i can keep track and change only the post on which i am clicking.
Solution
You should add additional property on post object to achieve this behavior. For example you could add captionLimit property on every post object and set it to 50 on initialization.
<div ng-repeat="post in posts">
<div class="post-block__content mb-2">
<p>{{post.caption | limitTo: post.captionLimit}}</p>
<span ng-if="(post.caption.length > 50) && post.captionLimit==50">
<button ng-click="post.captionLimit=9999">Show more</button>
</span>
</div>
</div>
Answered By - AvgustinTomsic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.