CODEWITHSUNDEEP
angularjshtml-tableangular-ui-bootstrap
Phoenix
Phoenix

Reputation: 295

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

I have a remarks column in my data grid and its length may vary. I don't want to display the whole text directly in the grid and only want to display first 2/3 lines of the paragraph. I want the complete text to be displayed only on a hover or a click.

Currently I am using a vertically expandable text area that cannot be edited to display the remarks. It is not looking good on the web page and so I am looking for better options.

My HTML is:

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

Controller :

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

I am new to angular and don't have any clue to achieve this in a way it doesn't break the data grid.

Can anyone help me out by recommending a better option to display the 'Remarks' within the <td> rather than displaying it using a disabled text area?

Please show examples with code rather than directions as I am in learning phase and examples are more useful.

Upvotes: 0

Views: 1035

Answers (1)

ngCoder
ngCoder

Reputation: 2105

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>

Basically you need an ellipsis sort of for the text,so add the below css class to your <td> with a <span> in it one showing the partial content and on mouse hover another span will show the full content.Create a $scope.showRemarks = {}; object in your JS.

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

In your 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>

Upvotes: 1

Related Questions