在 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 悬停选择器代替 "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;
}

Link 演示：http://plnkr.co/edit/ixbxp1gGlDD6I5hHYhHS?p=preview

在 ng-grid 悬停上显示按钮

Show button on ng-grid hover

angularjs

ng-grid