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?

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?

• javascript
• angularjs

• why do you prefer ng-mouseover for an effect you can achieve with css only? – Lorenzo Marcon Commented Jun 18, 2016 at 13:33
• 1 have you heard of css :hover selector? – Akshay Khandelwal Commented Jun 18, 2016 at 13:41
• @AkshayKhandelwal, yes I heard ,but I need to use ng-mouseover – Michael Commented Jun 18, 2016 at 13:45
• @Michael in that case I am not the right guy to answer this question as I have near to zero experience with angular – Akshay Khandelwal Commented Jun 18, 2016 at 13:46
• @Michael Why do you NEED to use ng-mouseover? In my opinion, that is clearly a concern for CSS. Everything else is much more unreadable and plicated. – Herr Derb Commented Jun 30, 2017 at 15:10

3 Answers 3

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

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 es from this SO question

you can apply class on mouse over like this.

http://jsfiddle/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;
}