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 の head で、スタイルシートへの直接リンクを使用しようとすると、奇妙な表示効果があります。ただし、同じコードをローカル ファイルに配置すると、機能します。

于 2013-04-14T05:25:26.247 に答える