角度ng-grid中的popover不起作用

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文件：

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

但是，您很快就會發現，一旦 gridheight 更改或滾動條起作用，這將導致許多其他顯示問題。

我還沒有找到真正的解決方案，但也許這可以讓您了解如何進行。 當你找到一種方法來做到這一點時，請通知我。

角度ng-grid中的popover不起作用

問題描述

1 個解決方案

解決方案1
1 2014-08-21 09:19:50

角度ng-grid中的popover不起作用

問題描述

1 個解決方案

解決方案1 1 2014-08-21 09:19:50

解決方案1
1 2014-08-21 09:19:50