Question

我的数据网格中有一个备注列，其长度可能会有所不同。我不想直接在网格中显示整个文本，只想显示段落的前2/3行。我希望只在悬停或点击时显示完整的文字。

目前我正在使用无法编辑的垂直可扩展文本区域来显示备注。它在网页上看起来不太好，所以我正在寻找更好的选择。

我的HTML是：

<div class="widget-content" ng-controller="getReservationController">

                <table ng-table="reservationsList" show-filter="true" class="table table-striped table-bordered" wt-responsive-table>
                    <tr ng-repeat="reservation in data" >
                        <td data-title="'#'">{{$index + 1}}</td>
<td data-title="'Remarks'">
                            <textarea disabled style="width:180px; resize:vertical">{{reservation.remark}}</textarea>

                        </td>
</tr>
                </table> 


    </div>

控制器：

myApp.controller('getReservationController', ['$scope', 'reservationServices', 'dataTable', '$rootScope', '$location', '$filter', function ($scope, reservationServices, dataTable, $rootScope, $location, $filter) {
    reservationServices.getReservations().then(function (result) {
        $scope.data = result.data;
});
}]);

我是角色的新手，没有任何线索可以实现这一点，不会破坏数据网格。

任何人都可以通过推荐更好的选项来显示<td>中的“备注”，而不是使用禁用的文本区域来显示它吗？

请显示代码而不是方向的示例，因为我处于学习阶段，示例更有用。

Answer 1

var app = angular.module('plunker', []);

app.controller('Ctrl', ['$scope', '$log', '$http',
  function($scope, $log, $http) {
    $scope.reservation = {};
    $scope.reservation.remark = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";

  }
]);

.ellipses {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="plunker" ng-controller="Ctrl">
  <div data-title="'Remarks'" ng-click="showRemarks=!showRemarks"><span ng-hide="showRemarks" class="ellipses">{{reservation.remark}} </span> 
    <span ng-show="showRemarks"> {{reservation.remark}} </span>
  </div>
</div>

基本上你需要对文本进行省略号排序，所以将下面的css类添加到<td>，其中<span>显示部分内容，鼠标悬停时另一个跨度将显示完整内容。在JS中创建一个$scope.showRemarks = {};对象。

.ellipses{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

在您的HTML中

    <td data-title="'Remarks'" ng-mouseover="showRemarks[$index]=!showRemarks[$index]" ><span ng-hide="showRemarks[$index]" class="ellipses">{{reservation.remark}} </span> 
<span ng-show="showRemarks[$index]"> {{reservation.remark}} </span> </td>

如何使用AngularJS在悬停时在表格中创建可展开的行？

1 个答案: