javascript - 在 Angular Bootstrap 的特定行上禁用表格悬停

Question

我有一个显示可选信息的表格。有时会有可选择的子行。

如果父行没有子行，我希望它们是可选的，否则只有子行应该是可选的。这是一种只能选择一种类型的表格。

此表按预期工作。但是，我想禁用不可选择的父行上的悬停。

这是一个有效的插件:http://plnkr.co/edit/Z0cgHKx2qxpekEE36O1K?p=preview

这里是 Controller 中一些代码的例子:

    scope.parentSelected = [];
$scope.childSelected = [];

$scope.getParentDetails = function(parentObj) {
  if(!parentObj.jobs || parentObj.jobs.length === 0) {
    nonSelectOtherRows(); 
    var index = $scope.pro.indexOf(parentObj);
    $scope.parentSelected[index] = !$scope.parentSelected[index];

    // get details for parent row using parentObj
    console.log(parentObj);
  } 
};

$scope.getChildDetails = function(parentObj, childObj) {
  nonSelectOtherRows();
  var parentIndex = $scope.pro.indexOf(parentObj);
  var childIndex = parentObj.jobs.indexOf(childObj);
  $scope.childSelected[parentIndex] = [];
  $scope.childSelected[parentIndex][childIndex] = !$scope.childSelected[parentIndex][childIndex];

  // get details for parent and child rows using parentObj and childObj.
  // childObj is the childRow selected
  console.log(parentObj);
  console.log(childObj);
}

Answer 1

删除 table-hover 属性。

实现您的 ng-mouseover 和 ng-mouseleave 函数。

$scope.hoverIn = function(row){
   row.hoverEdit = true;//check selectable or not
};
$scope.hoverOut = function(row){
   row.hoverEdit = false;
};

为悬停定义 css 类。

.custom-hover {
  background-color: red;
}

最后将类添加到您的 tr

`'custom-hover': x.hoverEdit`

这里是:http://plnkr.co/edit/CJxi86GyM8jMbtehPQgU?p=preview在 hoverIn 中添加您的可选择控件，它将起作用。