Angular JS truncate text and add read more

Question

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?

Answer 1

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;
}

Angular JS truncate text and add read more

Sign up