javascript - 在 Angular UI-Grid 中交换数据，在外部更改数据集时新列不可见

Question

我有一个我一直在使用的查询工具，它有一个已填写的 Angular 表单，然后在提交时使用返回 JSON 的 AJAX，然后将其呈现为 ui-grid ，JSON 响应看起来像

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}

我正在研究 PHP 和 Angular，因此如果需要，我可以完全控制此 JSON 响应。当呈现来自第一个 AJAX 调用的 JSON 响应时，我遇到了一个问题，然后我在同一页面上运行另一个单独的 AJAX 调用并获取一个新数据集:这个新数据集不呈现任何不在原始数据集中的列数。这是一个很大的问题，因为当所有列都不相同时，表格基本上被清除了，而且我经常需要在这个单页应用程序中将完全不同的数据加载到 ui-grid 中。

收到 JSON 后，我只需将 jsonResult.results 绑定(bind)到 ui-grid 绑定(bind)到的旧 $scope.myData 变量。

我做了 a plunker隔离这个问题。加载带有“punk”列的数据集，然后单击“swap data”将尝试加载带有“employee”列而不是“punk”的数据集。到目前为止，我已经研究了当 $scope.myData 变量使用 $watch 更改时将刷新或重新加载的指令，并寻找类似 $scope.columnDefs 的东西来让 ui-grid 知道。 angular 和 javascript 相对较新，所以指令仍然有点让我头疼。

Answer 1

我稍微更新了你的 plunker:

$scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

因为你的 json 中有列，所以应该很容易做到。