添加文本的角度UI網格日期列

Question

我有一個角UI的網格，有一個日期一列，它表示電子郵件被髮送到一個新用戶的日期：

{ 
    name: "SentOn", 
    displayName: "Sent On", 
    cellFilter: "date:\"yyyy-MM-dd HH:mm\"" 
} 

電子郵件直到許多後臺進程完成纔會發送，所以此日期可以爲空。日期爲空時，單元格中不顯示任何內容。

當日期爲空時，是否有直接顯示某些默認文本的方法？

Answer 1

有兩種方法可以達到你想要的效果。

1. 您可以爲單元格提供自定義模板以處理空日期情形。這可能也是更簡單的選擇。

{ 
    name: "SentOn", 
    displayName: "Sent On", 
    cellTemplate : "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS || \"Not Sent\"}}</div>" 
} 

或者你可以創建一個自定義cellFilter將採取空日期的照顧。您可以擴展現有的日期過濾器來實現此目的。

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit']); 
var grid; 
app.filter('customDate', function($filter){  
    var standardDateFilterFn = $filter('date'); 
    return function(dateToFormat){ 
     if(!dateToFormat) 
     return "Not Sent Yet"; 
    return standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss'); 
    }  
}); 
app.controller('MainCtrl', ['$scope', function ($scope) { 

    var myData = [ 
    { 
     id1:new Date(),id2:"2",id3:"3",id4:"4",id5:"5", 
    }, { 
     id1:null,id2:"2",id3:"3",id4:"4",id5:"5", 
    },] 

    var getTemplate = function() 
    { 

     return "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}</div>"; 

    } 

    var cellEditable = function($scope){ 
    if($scope.row.entity.oldId4===undefined) 
     return false; 
    return $scope.row.entity.oldId4!=$scope.row.entity.id4; 
    } 

    $scope.gridOptions = { 
     enableFiltering: true, 
     onRegisterApi: function(gridApi){ 
     grid = gridApi; 
    }, 
    data: myData, 
    columnDefs:[ 
     { 
      field: 'id1', 
      displayName: "id1", 
      width: 200, 
      cellTemplate: getTemplate(), 
      cellFilter : "customDate:\"yyyy-MM-dd HH:mm\"" 
     }, 
     { 
      field: 'id2', 
      displayName: "id2", 
      width: 100 
     },{ 
      field: 'id3', 
      displayName: "id3", 
      width: 100 
     },{ 
      field: 'id4', 
      displayName: "id4", 
      width: 100 
     },{ 
      field: 'id5', 
      displayName: "id5", 
      width: 100 
     }, 

    ], 
} 
$scope.gridOptions.onRegisterApi = function(gridApi){ 
      //set gridApi on scope 
      $scope.gridApi = gridApi; 
      gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){ 
      rowEntity.oldId4 = oldValue; 
      $scope.$apply(); 
      }); 
     }; 

$scope.test = function() 
{ 
    window.alert("Cell clicked") 
} 
}]); 

這裏是一個工作plnkr。 http://plnkr.co/edit/qHaRzkzxGEphuTMQ6oqG?p=preview