如何在悬停时使用 AngularJS 在 table 中创建可扩展行？

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;
});
}]);

我是 angular 的新手，不知道如何在不破坏数据网格的情况下实现这一目标。

任何人都可以推荐一个更好的选项来帮助我在 <td> 中显示 'Remarks' 而不是使用禁用的文本区域显示它吗？

由于我正处于学习阶段，请展示代码示例而不是说明，示例更有用。

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 class 添加到你的 <td> 中，其中有一个 <span> 显示部分内容和鼠标悬停另一个跨度将在您的 JS 中显示完整的 content.Create 一个 $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 在 table 中创建可扩展行？

How to make an expandable row in a table on hover using AngularJS?

html-table

angularjs

angular-ui-bootstrap