如何在ui-grid中更改顯示的內容？

Question

我在angulrjs項目中使用uigrid：

這裏是內容顯示：

$scope.arr = [{id:'124',name:'Max', IsMale:'true'}, 
        {id:'589',name:'Anna', IsMale:'false'}, 
        {id:'45',name:'Donna', IsMale:'false'}, 
        {id:'567',name:'Mark', IsMale:'true'}]; 

這裏是UI-GRID defenition：

$scope.gridOptions = { 
     enableColumnMenus: false, 
     enableSorting: true, 
     enableFiltering: false, 
     enableToopTip: true, 
     enableHorizontalScrollbar: 0, 
     onRegisterApi: function (gridApi) { 
      gridApi = gridApi 
     } 
    } 

    $scope.gridOptions.columnDefs = [ 
    { name: 'Name ', field: 'name', cellTooltip: true, headerTooltip: true }, 
    { name: 'Id ', field: 'id', cellTooltip: true, headerTooltip: true }, 
    { name: 'IsMail ', field: 'IsMale', cellTooltip: true, headerTooltip: true }]; 

    $scope.gridOptions.data = $scope.arr; 

這裏是模板：

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

這裏是工作plunker。

我想要改變顯示內容的字段ui網格中的字段顯示「真」我需要顯示「是」，其中是假我需要顯示「否」。

任何ide如何改變顯示在ui網格領域的內容？

Answer 1

我改變了你的$ scope.arr，所以你的isMale實際上是一個布爾類型。

$scope.arr = [{id:'124',name:'Max', IsMale:true}, 
       {id:'589',name:'Anna', IsMale:false}, 
       {id:'45',name:'Donna', IsMale:false}, 
       {id:'567',name:'Mark', IsMale:true}]; 

然後我添加了一個cellTemplate到您的gridOptions。

$scope.gridOptions.columnDefs = [ 
    { name: 'IsMail ', field: 'IsMail', cellTooltip: true, headerTooltip: true, cellTemplate: '<div><p ng-if="COL_FIELD">YES</p><p ng-if="!COL_FIELD">NO</p></div>' }];