Angular JS truncate text and add read more

Question

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: ``` //NG-repeat

{{wine.copy|truncate: textLength }} More

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

Accepted Answer

Target the `wine` for the `ng-click`: ```

{{wine.copy|truncate: wine.textLength }} More

``` And then only truncate the targeted text: ``` $scope.changeLength = function(wine) { wine.textLength = 9999; } ```

Angular JS truncate text and add read more

Solution

Problem