ng-grid悬停时显示按钮

Question

有没有办法在ng-grid中显示行悬停按钮(类似http://jsfiddle.net/andrewboni/fnAwN/light/)？

我经常在范围问题上运行(我认为).

我有一个行模板:

rowTemplate: '<div ng-mouseover="grid.appScope.showButton()" ng-mouseout="grid.appScope.hideButton()">
<div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell>
</div>
</div>',

和一个带有按钮的单元格模板:

cellTemplate: '<div class="ui-grid-cell-contents button-cell">
<button ng-click="grid.appScope.removeRow(row)" class="btn btn-danger btn-xs pull-right" ng-show="grid.appScope.button">
delete
</button>
</div>'

但是,当我悬停一行时,按钮不仅会出现在悬停行中,而且会出现在每一行中.

完整代码:http://plnkr.co/edit/UV9R4GbaREmchXKpSjfx？p = preview

任何人都可以帮助我吗？

Answer 1

您可以在这种情况下使用css hover选择器而不是"ng-show","ng-mouseover","ng-mouseout",如下所示:

HTML模板

<div class="ui-grid-cell-contents button-cell">
<button ng-click="grid.appScope.removeRow(row)" class="btn btn-danger btn-xs pull-right my-button">delete</button>
</div>

CSS

 .my-button {
   display: none;
 }
.ui-grid-row:hover .my-button {
  display: block;
}

链接演示:http://plnkr.co/edit/ixbxp1gGlDD6I5hHYhHS？p = preview