angularjs用户界面网格 - 动态分配列和数据

Question

我想动态地将列添加到ui-grid并分配数据。第一次，电网运行良好。但是，当我尝试动态更改列和数据时，它不按预期工作。

$scope.myfunc = function() { 

alert("Rebinding the data"); 
$scope.gridOptions = {}; 

$scope.gridOptions.columnDefs.push({ 
name: 'firstName' 
    }); 
    $scope.gridOptions.columnDefs.push({ 
name: 'lastName' 
    }); 
    $scope.gridOptions.columnDefs.push({ 
name: 'company' 
    }); 
    $scope.gridOptions.columnDefs.push({ 
name: 'employed' 
    }); 

    alert("added new columns"); 
    $scope.gridOptions.data = data1; 

    $scope.gridApi.grid.refresh(); 
}; 

请检查plunkr

任何人都可以研究这个问题，并建议我如何做到这一点？

Answer 1

我想你可以删除代码：$scope.gridOptions = {};

最新plunker

第二data1应该被推入第一data

我已经改变了最新的代码plunker，请检查它！

$scope.myfunc = function() 
    { 

    alert("Rebinding the data"); 
    $scope.gridOptions.columnDefs = new Array(); 

    $scope.gridOptions.columnDefs.push({ 
    field: 'firstName' 
     }); 
     $scope.gridOptions.columnDefs.push({ 
    field: 'lastName' 
     }); 
     $scope.gridOptions.columnDefs.push({ 
    field: 'company' 
     }); 
     $scope.gridOptions.columnDefs.push({ 
    field: 'employed' 
     }); 

     alert("added new columns"); 
     $scope.gridOptions.data = data1; 

    /* for(var i=0; i<$scope.gridOptions.data.length; i++){ 
     $scope.gridOptions.data[i].firstName = data1[i].firstName; 
     $scope.gridOptions.data[i].lastName = data1[i].lastName; 
     $scope.gridOptions.data[i].company = data1[i].company; 
     $scope.gridOptions.data[i].employed = data1[i].employed; 
     } */ 


     $scope.gridApi.grid.refresh(); 
    }; 

，如果你想移除旧的栏，你可以使用

$scope.gridOptions.columnDefs = new Array();

，然后使用刷新数据：

$scope.gridOptions.data = data1; 

$scope.gridApi.grid.refresh();