How to keep track ng-repeat and change only that element-CodePudding

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 >
                  
         <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.

CodePudding user response：

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 >
    <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>