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?

Davin Tryon · Accepted Answer · 2013-11-24 20:57:03Z

8

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

answered Nov 24, 2013 at 20:57

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MichaelBell Over a year ago

Many Thanks Davin Out of interest how does angular know which 'wine' to effect?

Davin Tryon Over a year ago

if you look at the generated markup you'll see that ng-repeat is copied on every repeated element. So, there is a new scope for every wine.

Collectives™ on Stack Overflow

Angular JS truncate text and add read more

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related