Angularjs ng Grid，在多个 ng 网格显示期间，当 Grid Options 中的 columnsDef 不同时，无法显示某些 ng 网格的数据

Question

我试图通过单击一次按钮来显示多个 ngGrid。但是当这些网格的网格选项中的 columnDef 选项不同时，问题就来了。请找到我的 plunker http://plnkr.co/edit/y878sCsl3PJ04MhcAKYI?p=preview。在这里，当我们单击“创建多个 ng 网格”时，Grid 2 和 Grid 3 数据显示正常，因为 Grid 选项中的这两个 columnDef 是相同的。但是 Grid1 数据没有出现，它在 Grid Options 中的 columnDef 与 Grid2 和 Grid3 不同。作为参考，我通过'Create ng Grid1'和'Create ng Grid2'将它们单独分开，它们工作正常。我尝试使用“创建多个网格”按钮一起创建相同的网格。但是第一个网格数据没有出现。谁能帮我解决一下？

以下是我的网格选项设置代码：

if (dashletteId == 1) {

    $scope.myData = $scope.tabs[dashVar].data;
    $scope.myColumnDefs = $scope.getColumnDefs($scope.tabs[dashVar].columns);
    $scope[gridOptions] = {
        data: 'myData',
        showGroupPanel: true,
        jqueryUIDraggable: false,
        columnDefs: $scope.myColumnDefs
    };



} else {


    $scope.myData = $scope.tabs[dashVar].data;
    $scope.myColumnDefs = $scope.tabs[dashVar].columns;
    $scope[gridOptions] = {
        data: 'myData',
        showGroupPanel: true,
        jqueryUIDraggable: false,
        columnDefs: $scope.myColumnDefs
    };
}

$scope.getColumnDefs = function( columns ){
    var columnDefs = [];

    columnDefs.push({field: 'mode', displayName: 'Mode', enableCellEdit: true, width: '10%'});
    columnDefs.push({field:'service', displayName:'Service', enableCellEdit: true, width: '10%'});

    angular.forEach(columns, function( value, key ) {
        columnDefs.push({field: key, displayName: value, enableCellEdit: true, width: '10%' })
    });

    return columnDefs;
};

Answer 1

所有 3 个网格 columnDefs 都指向 $scope.myColumnDefs 最终所有网格 columnDefs 都被评估为同一个数组。

您可能需要将要分配给 columnDefs 的范围变量分开。

var template = '<div class= "chartsDiv">';

var config = {
    1: {
        gridOptions: 'gridOptionsOne',
        data: 'dataOne',
        columnDefs: 'colDefsOne'
    },
    2: {
        gridOptions: 'gridOptionsTwo',
        data: 'dataTwo',
        columnDefs: 'colDefsTwo'
    },
    3: {
        gridOptions: 'gridOptionsThree',
        data: 'dataThree',
        columnDefs: 'colDefsThree'
    },
};
for (var dashVar = 0; dashVar < $scope.tabs.length; dashVar++) {
    var name = "Recovery";
    var dashletteId = $scope.tabs[dashVar].dashletteId;
    var axisType = $scope.tabs[dashVar].axisType;
    var chartName = "chart" + name.replace(/ +/g, "") + dashVar;
    var tableData = "chart" + name.replace(/ +/g, "") + dashVar;
    var gridOptions = "gridOptions" + chartName;


    if (axisType == "table") {


        if (dashletteId == 1) {
            $scope[config[dashletteId].columnDefs] = $scope.getColumnDefs($scope.tabs[dashVar].columns);
        } else {
            $scope[config[dashletteId].columnDefs] = $scope.tabs[dashVar].columns;
        }
        $scope[config[dashletteId].data] = $scope.tabs[dashVar].data;
        $scope[config[dashletteId].gridOptions] = {
            data: config[dashletteId].data,
            showGroupPanel: true,
            jqueryUIDraggable: false,
            columnDefs: config[dashletteId].columnDefs
        };

        template += ' <div class="col"> <p class="graphtitle">' + $scope.tabs[dashVar].dashletteName + ' </p> <div class="gridStyle" ng-grid="' + config[dashletteId].gridOptions + '"></div>';
    }


}

template += ' </div>';
//  alert(template)
angular.element(document.body).append($compile(template)($scope));