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

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