MichaelBell MichaelBell - 4 years ago 148
AngularJS Question

Angular JS truncate text and add read more

I have an ng-repeat that is outputting a number of

. 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:

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

$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
I am finding all the of items in the
are modified.

Is there a way to change a single

Answer Source

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>

And then only truncate the targeted text:

$scope.changeLength = function(wine) {
    wine.textLength = 9999;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download