CODEWITHSUNDEEP
javascriptangularjs
user2865156
user2865156

Reputation: 311

remove angular limitTo on ng-click

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>

Upvotes: 6

Views: 3997

Answers (4)

Ewald Bos
Ewald Bos

Reputation: 1770

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!

Upvotes: 0

Abdo-Host
Abdo-Host

Reputation: 4173

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

Upvotes: 0

phylax
phylax

Reputation: 2086

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>

Upvotes: 3

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

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>

Upvotes: 11

Related Questions