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

Question

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.

ngCoder · Accepted Answer · 2016-10-14T13:37:40.913

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>

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>

edited Oct 14 '16 at 13:37

answered Oct 14 '16 at 13:05

ngCoder

2,095
1
13
22

$scope.showRemarks = {}; is to be left like that only in the JS? – Phoenix Oct 14 '16 at 13:19
yes ! jus create the object and leave it like that ng-mouseover will handle which keys should be created and set to true and false.Updated solution with demo pls check,I would advice use better HTML tags for display in as I've just used for example purpose. – ngCoder Oct 14 '16 at 13:23
Its creating a blinking effect and its a bit hard to keep the text expanded. Can we do the same on a click instead of hover? Also, my table row is getting expanded horizontally pushing some TDs out. Can we set it to only expand vertically? I will place a screenshot to show you the issue. https://s12.postimg.org/v3lcpas7x/before_and_after_hover.png – Phoenix Oct 14 '16 at 13:33
you can do one thing use `ng-click` instead of `ng-mouseover` and keep it on `` tag instead of span. – ngCoder Oct 14 '16 at 13:36
I changed ng-mouseover to ng-click . Now only thing left is to make it expand only vertically. Any tips? – Phoenix Oct 14 '16 at 13:37
Hmm you should be having some css on it make `table-layout:fixed;` I guess that should work. – ngCoder Oct 14 '16 at 13:38
Thanks a lot for your help (again) :) – Phoenix Oct 14 '16 at 13:41
Cheers anytime mate :) Happy coding – ngCoder Oct 14 '16 at 13:42
Can you have a check on this? http://stackoverflow.com/questions/40108516/filter-data-in-angular-select-based-on-condition – Phoenix Oct 18 '16 at 12:42

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

1 Answers1