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>

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>

• javascript
• angularjs

4 Answers 4

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>

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>

I have put together a fiddle for you that does what I think you are after. The key is to keep track of the listLimit inside a controller, which changes upon clicking on the more/less text.

var module = angular.module("MyModule", []);
module.controller("MyController", function($scope) {
    // create the dummy list items
    $scope.list = [];
    for(var i=0; i<100; i++){
    	$scope.list.push({
      	value: i
      });
    }
    
    // set the initial item length
    $scope.totalItems = 5;
    
    // more/less clicked on
    $scope.more = function(){
    	if($scope.totalItems === 5){
      	$scope.totalItems = $scope.list.length;
      }else{
      	$scope.totalItems = 5;
      }    	
    }  
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyModule" ng-controller="MyController">  
  <ul>
     <li ng-repeat="item in list | limitTo:totalItems">
      This is item {{$index}}           
     </li>
  </ul>
  <button type="button" ng-click="more()">{{totalItems === 5 ? 'more' : 'less'}}</button>
</div>

extremely simple version:

in controller:

$scope.limit = 3;

$scope.setLimit = function (number) {

    $scope.limit = number;

}

in HTML

<div ng-repeat="item in items | limitTo:limit">

  <div ng-show="ng-show="items.length > limit && $index == 0">

    <span ng-click="setLimit (items.length)">show all</span>

  </div>

  <div>{item.yourexpression}}</div>

<div>

now it will only show the div if there are more items as the limit and it will show it only above the first item, we send the length of the ng-repeat to the controller and update the limit. Done!