无法使用 angularFire 在 ui-grid columnDef header 中显示来自服务器的日期

Question

几周前我开始使用 ui-grid 版本 3，并且能够成功地将 firebase 数据 objects 引入我的网格中。现在，我想在每次提交表单条目时显示来自服务器的日期，即使日期字段不是表单中的字段，我也需要在网格上显示它以便为每个字段提供日期参考提交成功。

在我的控制器中，我更改了代码以更好地反映问题：

var timeRef = new Firebase('https://xxc16.firebaseio.com/calls');

timeRef.set('time')
.set(Firebase.ServerValue.TIMESTAMP)
.on("value", function(snapshot){
     var currentServerTime = snapshot.val();
     console.log('The server time set for this call is:'+currentServerTime);
});

$scope.gridOptions = {
    columnDefs: [
        {name:'Created On', field: 'createdOn', width:120,cellTemplate:"<div class='ui-grid-cell-contents'> {{3+3}} -{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"},
        {name:'firstname', field: 'firstname'},
        {name:'lastname', field: 'lastname'},...

我有：

firebase.js2.3.1
- angularfire.min.js 1.1.3

数据结构：

Answer 1

要将值绑定到 ui-grid 中的单元格模板，最好使用 appScopeProviver。

您可以在 ui-grid 配置对象中定义 appScopeProvider，如下所示，

appScopeProvider: {}

现在可以使用 grid.appScope.yourVariableName

在模板中访问在 appScopeProvider 上公开的任何值

所以在你的情况下，你需要在 appScopeProvider 上公开你的值，如下所示，

appScopeProvider {
  createdOn: $scope.createdOn
 }

现在您可以在您的模板中访问相同的内容，如下所示，

cellTemplate:"<div class='ui-grid-cell-contents'>{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"

您的值将绑定到您的模板。

但是，如果您的值每行都会更改，您可以定义一个可以 return 日期的函数，而不是属性。

例如

appScopeProvider: {
  getCreatedOn: function() {
     // your logic here to get the created on date.
     // return your value.
  }
}

下面我提供了一个示例片段，我在其中创建新列（创建日期）并将我的值绑定在控制器中定义的 $scope.createdOn 上。

var app = angular.module("myapp", ["ui.grid"]);

app.controller("uiGridCntrl", ["$scope", function($scope){
  $scope.myData = [{name: "Moroni", city: "Washington"},
                  {name: "Tiancum", city: "NY"},
                  {name: "Jacob", city: "LA"}];
  
  
  $scope.createdOn = new Date();
  
  $scope.gridData = {
    data: 'myData',
    columnDefs: [
      {field: 'name', displayName: 'Name'},
      {field: 'city', displayName: 'City'},
      {field: 'Created On', displayName: 'Created Date', cellTemplate:"<div class='ui-grid-cell-contents'>{{grid.appScope.createdOn | date:'MM/dd/yy h:mm:ss a'}}</div>"}
    ],
    
    appScopeProvider: {
      'createdOn': $scope.createdOn
    }
       
  }
                   
                   
}]);

.ui-grid-style {
  height: 400px;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

<div ng-app="myapp">
  <div ng-controller="uiGridCntrl">
  <div class="ui-grid-style" ui-grid="gridData"></div>
    </div>
 </div>

Answer 2

Firebase.ServerValue.TIMESTAMP 是在服务器上用于生成基于服务器的时间戳的占位符。它不是 JavaScript 日期对象。因此，您不能将它用作 Date 对象。阅读 API docs for TIMESTAMP 应该会清楚这一点。

在本地，您应该简单地使用 new Date() 或 Date.now()。

$scope.calldate = new Date();

如果您真的想通过向用户显示服务器时间而不是本地时间来迷惑他们，请查看 offline capabilities 中的 .info/serverTimeOffset。（提示：你不想那样做）

请注意，在设置保存到服务器的数据的时间戳时，使用Firebase.ServerValue.TIMESTAMP是非常合适的。

另请参阅 this fiddle 以了解将日期纪元操纵到本地 Date 对象中的示例。

无法使用 angularFire 在 ui-grid columnDef header 中显示来自服务器的日期

Can't display date from server in ui-grid columnDef header with angularFire

angularjs

firebase

angularfire

angular-ui-grid