ui-gridヘッダーにかっこで表示する方法は？

Question

私はこれのようにuiグリッドで表示するオブジェクトの配列を持っています。

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)'）括弧の2列目と3列目を表示しません、私のUIグリッド

Answer 1

あなたができましたこのようなことをして、 "field"プロパティが

の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マッピングするオブジェクト、および "のdisplayName" からプロパティは、カスタム名を提供するために使用することができます'と' 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;