Question

几周前我开始使用ui-grid版本3，并且能够成功地将firebase数据对象添加到我的网格中。现在，我想在每次提交表单条目时显示服务器上的日期，即使日期字段不是表单中的字段，我还需要在网格上显示它以获取每个表单的日期引用成功提交。

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

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.js 2.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>"

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

但是，如果您的值将每行更改，而不是属性，则可以定义一个可以返回日期的函数。

例如

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对象。因此，您不能将其用作Date对象。阅读API docs for TIMESTAMP应该明确这一点。

在本地，您应该只使用新的Date（）或Date.now（）。

$scope.calldate = new Date();

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

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

另请参阅this fiddle以获取将日期时期操作为本地Date对象的示例。

无法使用angularFire

2 个答案: