Question

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

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

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

这是一个工作的掠夺者：http://plnkr.co/edit/Z0cgHKx2qxpekEE36O1K?p=preview

以下是控制器中某些代码的示例：

    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中添加可选择的控件，它将起作用。

Answer 2

尝试使用ng-class。它会帮助你。

在Angular Bootstrap中的某些行上禁用表格悬停

2 个答案: