Wie wird mit Klammern in UI-Grid-Headern angezeigt?

Question

Ich habe ein Array von Objekt in ui-Grid wie folgt anzuzeigen.

JS

var arr = [{ 
    'Reference': 1, 
    'Nominal load (daN)': 'xx', 
    'Nominal static deflection (mm)': 'yy' 
}, { 
    'Reference': 2, 
    'Nominal load (daN)': 'xx1', 
    'Nominal static deflection (mm)': 'yy1' 
}, { 
    'Reference': 3, 
    'Nominal load (daN)': 'xx2', 
    'Nominal static deflection (mm)': 'yy2' 
}]; 

$scope.gridOptions= arr; 

HTML

<div ui-grid=" {data: gridOptions}" class="grid"> </div> 

aber mein ui-Raster nicht zweiten und dritten Spalte wegen Klammern anzeigt ('Nominal load (daN)' and 'Nominal static deflection (mm)') in Header

Answer 1

Sie könnten Tun Sie etwas, so dass die Eigenschaft "Feld" zugeordnet wird

javascript:

$scope.gridOptions = { 
     columnDefs: [ 
     { field: 'Reference' 
     }, 
     { field: 'Nominal load (daN)', 
      displayName: 'Nominal load (daN)' 
     }, 
     { field: 'Nominal static deflection (mm)', 
      displayName: 'Nominal static deflection (mm)' 
     } 
     ], 
     data: arr 
    }; 

HTML:

<div ui-grid="gridOptions" class="grid"></div> 

Answer 2

Ich rief nur ‚columnDefs die Eigenschaft aus dem Objekt, die benutzerdefinierten Namen zu schaffen, kann abgebildet werden soll, und "displayname" verwendet 'und' Daten 'in HTML und dann habe ich versucht, es in JS zu füllen.

HTML

<div ui-grid=" {data: gridOptions, columnDefs: gridColumns, enableColumnMenus: false}" ui-grid-pagination class="grid"> </div> 

JS

$scope.setColumnDefs = function() { 

     var columnDefs = [{ 
     field: 'ref', 
     displayName: 'Référence' 
     }, { 
     field: 'charge', 
     displayName: 'Charge nominale (daN)' 
     }, { 
     field: 'fleche', 
     displayName: 'Flèche sous charge nominale (mm)' 
     }]; 

    $scope.gridColumns = columnDefs; 
    }; 
$scope.setColumnDefs(); 
$scope.gridOptions = data;