CODEWITHSUNDEEP
javascriptangularjs
Michael
Michael

Reputation: 13616

How to highlight the table row on mouse hover

I have this table:

<div class="container" ng-app="sortApp" ng-controller="mainController">

  <table class="table table-bordered ">  
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll 
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type 
          </a>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
      </tr>
    </tbody>

  </table>

</div>

Here is controller:

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  // create the list of sushi rolls 
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];

});

Here is fiddler.

I want to highlight the border of table row on mouse hover using ng-mouseover directive.

How can I implement it?

Upvotes: 3

Views: 12039

Answers (3)

pdorgambide
pdorgambide

Reputation: 1867

HTML: 

<table class="table-hover">

CSS:

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

And if else you want is to make the tr selectable:

HTML: 

<tr ng-click="doSomething()">

CSS:

tr[ng-click] {
    cursor: pointer;
}

View JSFiddle Sample

Upvotes: 9

Deep
Deep

Reputation: 9794

you can apply class on mouse over like this.

http://jsfiddle.net/uuws8hbv/

<tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish track by $index" ng-mouseover="rowselected($index)" 
  ng-class="{selected : $index == rowNumber}"

in the controller add function.

$scope.rowselected = function(row)
{
   $scope.rowNumber = row;
}

Upvotes: 2

mgamba
mgamba

Reputation: 1199

I'm not familiar with Angular, so this may be the incorrect way to do this, but this seems to work on your fiddle ...

change the row to

<tr ng-class="rollClass" ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish" ng-mouseenter="rollClass = 'highlight'" ng-mouseleave="rollClass = ''">

and add the css class

.highlight {
    background-color: gray;
}

The idea comes from this SO question

Upvotes: 2

Related Questions