CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
user979799
user979799

Reputation: 53

increase limitTo in angular for particular index

I am displaying the list using ng-repeat and have set the limitTo for all elements. If user clicks the read more button then I want to increase the limitTo for that specific index. Problem is it changes the limitTo value for all elements in ng-repeat. How to handle specific element by passing $index, any help ?

E.g.

<div class="review-story" ng-repeat="review in reviews">
    {{review.story | limitTo:numLimit}}
    <a class="readmore" ng-click="readMore($index)">read more...</a>
</div>

JS:

$scope.numLimit = 50;
$scope.readMore = function (index) {
    if ($scope.numLimit == 50) {
        $scope.numLimit = 10000;
        $('.readmore').html("read less");
    }
    else {
        $('.readmore').html("read more...");
        $scope.numLimit = 50;
    }  
};

Upvotes: 0

Views: 897

Answers (1)

Peter Ashwell
Peter Ashwell

Reputation: 4302

here is one solution which stores the limit in the data object. You may not want to do that, but then your solution is to store some data in the scope mapping reviews onto limit amounts.

http://plnkr.co/edit/spVkTCYZaBpZtQgAjrNi?p=preview

  $scope.reviews = [
    {
      story: 'this is the first story'
    },
    {
      story: 'this is the second story'
    },
    {
      story: 'this is the third story and it is longer than 30 characters'
    },
    {
      story: 'this is the fourth story and it is longer than 30 characters'
    }
  ];
  $scope.increaseLimit = function(review) {
    if (review.limit) {
      review.limit += 10;
    }
    else {
      review.limit = 40;
    }
  }

Template:

<div class="review-story" ng-repeat="review in reviews">
  {{review.story | limitTo: review.limit || 30}}<br />
  {{review}}
  <a href="#" ng-click="increaseLimit(review)">click me</a>
</div>

Upvotes: 1

Related Questions