如何在ng-grid中显示嵌套的JSON数据?

时间:2015-03-16 11:49:04

标签: angularjs ng-grid

我有一个JSON数据

{
    "data1": "val1",
    "data2": val2,
    "data3": [{
      "data4": "val3",
      "data5": "val4"
    }, {
      "data6": "val5",
      "data7": "val6"
    }],
    "data8": [{
      "data9": "val7",
      "data10": "val8",
      "data11": "val9"
    }, {
      "data12": "val10",
      "data14": "val11",
      "data14": "val12"
    }, {
      "data15": "val13",
      "data16": "val14",
      "data17": "val15"
    }],
    "id": 1
}

我想将内部JSON保留为单元格中的多个选择复选框或多个选择下拉列表。

对于例如:对于data3列,单个单元格将具有多个选择复选框或多个选择下拉列表,其中值为data4data6在一组中,在另一个中设置data5data7

我如何在此处表示数据?任何更好的解决方案也值得赞赏。

1 个答案:

答案 0 :(得分:0)

以下是我如何做同样的例子。 gridOptions填充在控制器中。在这种情况下,我使用http://ui-grid.info/

请注意,代码必须重构,因为它很难看,但工作正常。

    
vm.gridOptions =
            {
                columnDefs: [
                    { name: 'id', field: 'id' },
                    { name: 'name', field: 'name' },
                    { name: 'route', field: 'route' },
                    { name: 'sysmodulescreen name', field: 'sysModuleId' },
                    {
                        name: 'enable/disable',
                        field: 'isEnabled',
                        cellTemplate: '<button ' +
                            'ng-if="row.entity.isEnabled == 1" ' +
                            'class="btn btn-danger" ' +
                            'ng-model="row.entity.id" ' +
                            'ng-click="grid.appScope.disableModuleScreen(row.entity.id)">Disable</button>' +
                            '<button ' +
                            'ng-if="row.entity.isEnabled == 0" ' +
                            'class="btn btn-success" ' +
                            'ng-model="row.entity.id" ' +
                            'ng-click="grid.appScope.enableModuleScreen(row.entity.id)">Enable&nbsp;</button>'
                    },
                    {
                        name: 'edit',
                        field: 'id',
                        cellTemplate: '<button class="btn" ng-model="row.entity.id" ng-click="grid.appScope.editModuleScreen(row.entity.id)">Edit</button>'
                    },
                    {
                        name: 'delete',
                        field: 'id',
                        cellTemplate: '<button class="btn" ng-model="row.entity.id" ng-click="grid.appScope.deleteModuleScreen(row.entity.id)">Delete</button>'
                    }
                ]
            };