как отображать с круглыми скобками в заголовках ui-grid?

Question

У меня есть массив объектов для отображения в ui-grid, как это.

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> 

но мой пользовательский интерфейс сетки не показывает второй и третий столбцы из-за скобки ('Nominal load (daN)' and 'Nominal static deflection (mm)') в заголовках

Answer 1

Вы могли бы сделайте что-нибудь подобное, чтобы свойство «поля» отображалось свойство от объекта, который должен быть отображен, и "DisplayName" может быть использовано для обеспечения пользовательского имени:

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

Я просто назвал «columnDefs 'и' data 'в HTML, а затем я попытался заполнить его в JS.

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;