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。

フィールドが表示されているフィールドが「true」のui-gridのIsMalフィールドを変更したい場合は「はい」と表示する必要があり、falseの場合は「いいえ」と表示する必要があります。

ui-gridフィールドの表示内容を変更するにはどうすればよいですか？

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}]; 

次に、gridOptionsにcellTemplateを追加しました。

$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>' }];