CODEWITHSUNDEEP
angularjs
MichaelBell
MichaelBell

Reputation: 890

Angular JS truncate text and add read more

I have an ng-repeat that is outputting a number of <p>. I would like to truncate the text and add a read more button that expands when you click it.

This is what I have so far:

//NG-repeat
<div class="col-xs-4 mbm" ng-repeat="wine in wines">
    <p readMore> {{wine.copy|truncate: textLength }} 
        <a ng-click="changeLength()" class="color3"><strong>More</strong></a>
    </p>
</div>

//NG-click
$scope.changeLength = function() {
    $scope.textLength = 9999;
}

I have a custom directive that is able to truncate the length of the string. But when trying trying to modify the text length via and ng-click I am finding all the of items in the ng-repeat are modified.

Is there a way to change a single ng-repeat item?

Upvotes: 3

Views: 8670

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

Target the wine for the ng-click:

<p readMore> {{wine.copy|truncate: wine.textLength }} 
    <a ng-click="changeLength(wine)" class="color3"><strong>More</strong></a>
</p>

And then only truncate the targeted text:

$scope.changeLength = function(wine) {
    wine.textLength = 9999;
}

Upvotes: 8

Related Questions