remove angular limitTo on ng-click

Question

So I have a list of posts and they are all different lengths so I'm cutting them off at the 500th character, but I want to show the remainder of the post on an ng-click. It seems like there might be some "angular way" to do this but I have not found it through google.

<ul id = "postsList">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:500 }}</p>
    <button ng-click = "undoLimitTo()">View</button>
  </li>
</ul>

Answer 1

I would write it like:

set editable value for limit and give Posts length

<ul id = "postsList">
  <li ng-repeat="post in Posts" ng-init="limit= 500">
    <p>{{ post.messageBody | limitTo:limit }}</p>
    <button ng-click = "limit = Posts.length">View</button>
  </li>
</ul>

Answer 2

Try this:

<ul id = "postsList" ng-init="limit = 500">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:limit }}</p>
    <button ng-click = "limit = Number.MAX_SAFE_INTEGER">View</button>
  </li>
</ul>

EDIT

This is bullshit. It will change the limit for all posts.

You could in your controller add a limit property to the Posts. And then:

<ul id = "postsList">
  <li ng-repeat="post in Posts" >
    <p>{{ post.messageBody | limitTo:post.limit }}</p>
    <button ng-click = "post.limit = post.messageBody.length">View</button>
  </li>
</ul>