UI-GRID 动态列 headers 和 object 数据数组

Question

我有以下数据

vm.myData =
        {
            'Type' : 
            [
                'A',
                'B',
                'C'
            ],
            'Data': [
            {
                'Key': 'XXX',
                'AValues':
                {
                    'ID': '1',
                    'Val': '10'
                },
                'BValues':
                {
                    'ID': '2',
                    'Val': '20'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            },
            {
                'Key': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': '30'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': '70'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            }
            ]
        };

我正在尝试显示如下数据

Key A   B   C
XXX 10  20  20
TTT 30  70  20

我尝试了很多方法，但没有得到想要的结果。我希望列的名称来自 'myData' 上的 'Type'。我可以通过硬编码显示第一行。

vm.gridOptions = {
            columnDefs: [
                { name: 'Key', field: 'Data[0].Key'},
                { name: 'A', field: 'Data[0].AValues.Val'},
                { name: 'B', field: 'Data[0].BValues.Val'},
                { name: 'C', field: 'Data[0].CValues.Val'}
            ],
            data: vm.myData
        };

非常感谢任何帮助。

更新在听取了 Naren Mulrali 的建议后，我做了以下这给了我想要的结果。但是我有硬编码的列名（我需要不同的显示名称）。有没有办法从 'myData'

的 'Type' 数组中动态获取列 header

vm.gridOptions = {
            columnDefs: [
                { displayName: 'Key', name: 'Key' },
                { displayName: 'A', name: 'AValues.Val' },
                { displayName: 'B', name: 'BValues.Val' },
                { displayName: 'C', name: 'CValues.Val' }
            ],
            data: vm.myData.Data
        };

Answer 1

您需要将您的对象转换成 angular ui 网格可以理解的格式，请参考下面的 JSFiddle

        angular.forEach($scope.myData.Data, function(value, index){
          value.AValues = value.AValues.Val;
          value.BValues = value.BValues.Val;
          value.CValues = value.CValues.Val;
          $scope.myData.Data[index] = value;
        });

JSFiddle：link

UI-GRID 动态列 headers 和 object 数据数组

UI-GRID Dynamic column headers and array of object data

angularjs

angular-ui-grid