如何使用 AngularFire 将时间输入到 firebase 中?

How to input a time into firebase with AngularFire?

我希望用户能够通过从输入框中选择时间来将时间提交到 firebase 数据库中。

我知道如何根据 firebase documentation 让用户将文本输入到 firebase 中,但不知道用户如何一次性输入到 firebase 中。

当我将"type="time"'添加到输入框时(如下),下面的代码不能再向firebase提交输入。当它被删除时,它恢复正常。

HTML

<html ng-app="sampleApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
  </head>

  <body ng-controller="SampleCtrl">
    <ul>
      <li ng-repeat="message in messages">
        <input ng-model="message.text" ng-change="messages.$save(message)" />

        <button ng-click="messages.$remove(message)">Delete Message</button>
      </li>
    </ul>
    <form ng-submit="addMessage()">
      <input type="time" ng-model="newMessageText" />
      <button type="submit">Add Time</button>
    </form>
  </body>
</html>

AngularJS

var app = angular.module("sampleApp", ["firebase"]);

app.controller("SampleCtrl", function($scope, $firebaseArray) {
  var ref = new Firebase("https://frontier.firebaseio.com/messages");
  $scope.messages = $firebaseArray(ref);

  $scope.addMessage = function() {
    $scope.messages.$add({
      text: $scope.newMessageText
    });
  };

});

如何将时间提交到 firebase?

看我的codepen here

这里发生了一些事情:

  • text 类型的输入(输入的默认类型)将 return 一个字符串
  • time 类型的输入将 return 日期对象
  • Firebase 存储 JSON 数据
  • 日期对象没有 JSON 数据类型

因此,在将其传递给 Firebase 之前,您必须将获得的时间转换为受支持的类型。

$scope.addMessage = function() {
  $scope.messages.$add({
    text: $scope.newMessageText.toString()
  });
};

请注意,如果您只想显示日期,将日期存储为字符串非常有用。但是,如果您还想对其进行操作(例如,根据日期进行过滤),您可能希望将其存储为时间戳:

$scope.addMessage = function() {
  $scope.messages.$add({
    text: $scope.newMessageText.toString(),
    timestamp: $scope.newMessageText.getTime(),
  });
};