MichaelBell MichaelBell - 1 month ago 13
AngularJS Question

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?

Answer

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