在Angular UI

在Angular UI-Grid中交换数据时，外部更改数据集时新列不可见(Swapping data in Angular UI-Grid, new columns not visible when changing dataset externally)

我有一个查询工具，我一直在处理，其中有一个填充的角度表单，然后当它提交时，它使用AJAX返回JSON，然后呈现到UI网格中 ，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和角色，所以如果需要的话，我可以完全控制这个JSON响应。 当第一个AJAX调用的JSON响应被渲染时，我遇到了一个问题，然后我在同一页面上运行另一个单独的AJAX调用并获得一个新的数据集：这个新的数据集不会渲染任何列那些不在原始数据集中 。 这是非常严重的问题，因为在没有任何列是相同的情况下，表格基本上会被清除，并且我经常需要在此单页应用程序中将完全不同的数据加载到ui-grid中。

当接收到JSON时，我只需将jsonResult.results绑定到ui-grid绑定的旧$scope.myData变量即可。

我已经让这个问题陷入了困境 。 加载包含“朋克”列的数据集，然后单击“交换数据”将尝试加载具有“员工”列而不是“朋克”的数据集。 到目前为止，我已经查看了指令，当$ scope.myData变量使用$ watch更改时，它将刷新或重新加载，并查看类似$ scope.columnDefs的内容以让ui-grid知道。 相对较新的角度和JavaScript所以指令仍然是我的头。

I've got a query tool I've been working on, which has an angular form that is filled out, and then when it's submitted it uses AJAX which returns JSON, which is then rendered into ui-grid, that JSON response looks like

{ "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}] }

I'm working on both the PHP and angular so I have full control over this JSON response if need be. I'm running into an issue when my JSON response from a first AJAX call is rendered, and then I run another, seperate AJAX call on the same page and get a new data set: this new data set does not render any of the columns that were not in the original data set. This is hugely problematic as the table is essentially cleared when none of the columns are the same, and I often need to load completely different data into ui-grid in this single page app.

When the JSON is recieved I simply bind the jsonResult.results to the old $scope.myData variable that ui-grid is bound to.

I've made a plunker isolating this issue. A dataset with a "punk" column is loaded, and then clicking "swap data" will try to load a dataset with "employee" column instead of "punk". I've so far looked into directives that will refresh or reload when the $scope.myData variable changes using $watch, and looked at finding something like $scope.columnDefs to let ui-grid know. Relatively new to angular and javascript so directives are still a bit over my head.

最满意答案

我已经稍微更新了你的运动员：

$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中的列，那么它应该相当容易。

I have updated your plunker slightly:

$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

Since you have the columns in your json, it should be fairly easy to do.