Question

我有两个长短版本的变量。在单元格内的表格中，如果文本的长版本不为空，则在短文本的末尾应该有一个按钮（或其他合适的元素）。当用户按下此按钮（或其他合适的元素）时，会显示较长版本的文本。

我接下来的方式。我的表有部分代码：

<tbody>
    <tr ng-repeat="log in logs | orderBy:'-date'">
        <td>{{ log.date | date:"dd.MM.yyyy HH:mm:ss" }}</td>
        <td>{{ log.name }}</td>
        <td class="word-break">
            {{ isFullText ?  log.fullDescription : log.description  }} 
            <button ng-click="showDiffText()">{{ isFullText ? textButton[0] : textButton[1] }}</button>
        </td>
    </tr>
</tbody>

还有js功能：

 $scope.isFullText = false;
 $scope.textButton = ['1', '2'];
 $scope.showDiffText = function ()
 {
      $scope.isFullText = !$scope.isFullText;
 }

嗯，我的方式根本不起作用。有什么帮助吗？

Answer 1

问题是isFullText因为您使用ng-repeat如果将其设置为true它会开始显示所有行的全文，请尝试将其附加到日志级别，例如： - < / p>

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.logs=[{description :"sort",fullDescription:"long"},{description :"sort",fullDescription:"long"},{description :"sort"}]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tbody>
    <tr ng-repeat="log in logs">
        <td class="word-break">
            {{log.showFull ? log.fullDescription : log.description}} 
            <button ng-if="log.fullDescription" ng-click="log.showFull = !log.showFull">Show{{log.showFull ? "Sort":"Long"}}</button>
        </td>
    </tr>
</tbody>
</table>
</div>

如何最小化和最大化文本内部

1 个答案: