ng-grid更改样式以填充数据并使其可见

Question

我正在接受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';

});

View看起来像这样：

<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窥视的错误。

干杯

Answer 1

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

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

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