1

我正在学习 Angularjs 的 ng-grid 组件，但遇到了一个相当令人失望的问题。基本上，流程是这样的：页面加载，只有一个按钮可见。单击按钮，AJAX 请求获取 json 数据并将其绑定到网格。

这是我第一次单击按钮时看到的内容： 在此处输入图像描述

如果我完全调整浏览器的大小，它会恢复为正确的大小： 在此处输入图像描述

我的控制器如下所示：

myAppModule.controller('PodcastController', function ($scope, $http) {

    $scope.getData = function () {
        $http.get('/Home/PodcastDataAsJson').success(function (data) {
            $scope.podcasts = data;
        });

        $scope.gridVisibilty = 'gridStyle';
    };

    $scope.gridOptions = {
        data: 'podcasts',
        columnDefs: [
            { field: 'Id', displayName: 'Id' },
            { field: 'Name', displayName: 'Name' },
            { field: 'Artist', displayName: 'Artist' }
        ]
    };

    $scope.gridVisibilty = 'notDisplayed';

});

视图如下所示：

<div ng-app="gridExampleApp">
    <div ng-controller="PodcastController">

        <button ng-click="getData()">Click to get Data</button>

        <div id="datagrid" ng-grid="gridOptions" class="ng-class: gridVisibilty;"></div>

    </div>
</div>

我的CSS看起来像这样：

.notDisplayed 
{
    display: none;
}

.displayed 
{
    display: block;
    border: 1px solid rgb(212,212,212);
    width: 800px;
    height: 300px;
}

.gridStyle 
{
    display: block;
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

我想知道这是否是我，或者它是否是我应该提交给 Angular ng-grid 窥视的错误。

干杯

4

1 回答 1

2

您没有展示如何加载 ng-grid 样式表，但是当我尝试通过直接链接获取它时遇到了类似的问题。

这是一个带有 ng-grid 样式表的本地文件的演示：http ://plnkr.co/edit/2pq9YotA4RJIMll5BJvh?p=preview 。我还使用绑定到 podcasts 变量的 ng-show 指令作为显示/隐藏网格的条件。

在 index.html 的头部，如果你尝试使用样式表的直接链接，会有一个奇怪的显示效果。但是，如果您将相同的代码放在本地文件中，它就可以工作。

于 2013-04-14T05:25:26.247 回答