角度付きブートストラップの特定の行でテーブルホバーを無効にする

Question

選択可能な情報を表示するテーブルがあります。選択可能な子行があることがあります。

子供がいない場合、親の行を選択可能にしたい場合は、子の行のみを選択する必要があります。これは、選択のみの1つのタイプの表です。

この表は期待どおりに機能します。ただし、選択できない親行のホバーを無効にしたいとします。 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属性ここ

が動作plunkerあります。

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を試してみてください。それはあなたを助けるでしょう。