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

我尝试了很多方法，但无法获得理想的结果。我希望列的名称来自＆＃39; Type＆＃39;在＆＃39; myData＆＃39;。我可以通过硬编码显示第一行。

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的建议之后，我做了以下操作，这给了我想要的结果。但我有硬编码的列名（我需要不同的显示名称）。有没有办法从＆＃39; Type＆＃39;中动态获取列标题？来自＆＃39; myData＆＃39;

的数组

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

您需要将Object转换为网格理解的格式，请参阅下面的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动态列标题和对象数据数组

1 个答案: