Угловой JS текст усечения и добавление читать далее

Question

У меня есть ng-repeat, который выводит число <p>. Я хотел бы усечь текст и добавить кнопку «Читать дальше», которая расширяется при нажатии на нее.

Это то, что я до сих пор:

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

У меня есть пользовательская директива, которая способна укоротить длину строки. Но при попытке изменить длину текста через и ng-click я нахожу все элементы в ng-repeat изменены.

Возможно ли изменить один элемент ng-repeat?

Answer 1

Target wine для ng-click:

<p readMore> {{wine.copy|truncate: wine.textLength }} 
    <a ng-click="changeLength(wine)" class="color3"><strong>More</strong></a> 
</p> 

И тогда только усечь релевантный текст:

$scope.changeLength = function(wine) { 
    wine.textLength = 9999; 
}