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

ng-grid悬停时显示按钮

1 个答案: