带有详细视图的Angular ngGrid

Question

我想说有一个网格的详细视图是非常标准的，虽然我无法弄清楚如何使用ngGrid实现这一目标。我想要一个网格，我可以展开一行并让它显示下面那一行的细节。

与下面的网格类似：

我如何实现这一目标？到目前为止，这是我的代码：

    vm.filterOptions = {
        filterText: '',
        useExternalFilter: false
    }

    var columns = [{field: 'oper_status', displayName: 'Status', cellTemplate: '<div ng-class="{serverUp: row.getProperty(col.field) == 1}"></div>'},
            {field: 'dns_name', displayName: 'Name'},
            {field: 'mgmt_ip_address', displayName: 'IP'},
            {field: 'model', displayName: 'Model'},
            {field: 'boot_version', displayName: 'Version'}];

    vm.gridOptions = {
        data: 'vm.devices',
        columnDefs: columns,
        enableRowSelection: true,
        multiSelect: false,
        selectedItems: vm.selectedItems,
        filterOptions: vm.filterOptions,
        afterSelectionChange: function() {
            vm.details = vm.selectedItems[0];
        }
    };

-html

<div ng-grid="vm.gridOptions" class="grid"></div>