angularjs - 在 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;
}

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