Phoenix Phoenix - 11 days ago 7x
AngularJS Question

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>



Controller :

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

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

Can anyone help me out by recommending a better option to display the 'Remarks' within the
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.

Thanks in advance!


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=""></script>
<script src=""></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>

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.

    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>