javascript - 如何在 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)' 和 'Nominal static deflection (mm)')，我的 ui-grid 不显示第二列和第三列

Answer 1

您可以执行类似的操作，以便“field”属性映射到要映射的对象的属性，并且“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>