我正在使用 ng-grid 来显示数据，我想在鼠标悬停在这条线上时在弹出窗口中显示行项目，我的问题是弹出窗口没有覆盖 ng-grid 框架。
这是文件:
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
js文件:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.toggle = false;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
rowTemplate: '<div ng-mouseEnter="toggle = !toggle" ng-mouseLeave="toggle = !toggle" style="height: 100%;" ng-class=""><div ng-show="toggle" class="popover">Name : {{row.getProperty("name")}}<br>Age : {{row.getProperty("age")}}</div><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div><div ng-cell></div></div></div>'
};
});
CSS 文件:
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 200px;
z-index:0;
}
.green {
background-color: green;
color: white;
}
.popover {
background:green;
color: #fff;
width:200px;
height:80px;
z-index:999999;
position:absolute;
top:10px;
left: 50px;
padding: 10px;
}
你会在这里找到我的问题的来源http://plnkr.co/edit/t68djf?p=preview
谢谢你的帮助。
最佳答案
这与.ngViewport的定义有关，默认设置为overflow:auto。
您可以使用以下规则覆盖它:
.ngViewport {
overflow:visible;
}
但是，您很快就会发现，一旦网格高度发生变化或滚动条开始起作用，这将导致许多其他显示问题。
我还没有找到真正的解决方案，但也许这可以让您了解如何继续。当您找到执行此操作的方法时，请通知我。
关于javascript - Angular ng-grid中的弹出窗口不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25403710/