Question

我使用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 file：

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 }">&nbsp;</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

的来源

谢谢你的帮助。

Answer 1

这与.ngViewport的定义有关，默认情况下设置为overflow:auto。

您可以使用以下规则覆盖此内容：

.ngViewport {
    overflow:visible;
}

但是，正如您很快就会发现的那样，一旦网格高度发生变化或滚动条发挥作用，这将导致很多其他显示问题。

我还没有找到真正的解决方案，但也许这会让你知道如何继续。当你找到办法时，请通知我。

在角度ng网格中弹出不起作用

1 个答案: