如何在鼠标悬停时突出显示表格行

Question

我有一个表格：

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

这里是控制器：

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

});

这里有一个Fiddler。

我想使用ng-mouseover指令，在鼠标悬停时突出显示表格行的边框。

我该如何实现？

- Michael

---

你为什么更喜欢使用 ng-mouseover 去实现只能通过 CSS 实现的效果呢？ - Lorenzo Marcon

你听说过CSS的:hover选择器吗？ - Akshay Khandelwal

@AkshayKhandelwal，是的，我听说了，但我需要使用ng-mouseover。 - Michael

@Michael 那么我不是回答这个问题的合适人选，因为我对angular几乎没有经验。 - Akshay Khandelwal

@Michael，为什么你需要使用ng-mouseover？在我看来，这显然是CSS的问题。其他所有东西都更加难以阅读和复杂。 - Herr Derb

Answer 1

HTML:

<table class="table-hover">

CSS：

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

如果您希望使 tr 可选择：

HTML:

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

CSS（层叠样式表）：

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

查看JSFiddle示例

- pdorgambide

Answer 2

我不熟悉Angular，所以这可能不是正确的方法，但这似乎在您的fiddle上起作用...

将行更改为

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

并添加CSS类

.highlight {
    background-color: gray;
}

这个想法源于这个SO问题。

- mgamba

Answer 3

你可以像这样在鼠标悬停时应用类。 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}"

在控制器中添加函数。

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

- Deep

---

这是Angular的正确答案，应该被接受。 - lucygenik