如何用AngularFire在firebase中输入时间

How to input a time into firebase with AngularFire?

本文关键字：输入 时间 firebase 何用 AngularFire      更新时间：2023-09-26

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

我知道如何让用户根据firebase文档在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在这里

这里有几件事要做:

  • text类型的输入(输入的默认类型)将返回一个字符串
  • time类型的输入将返回一个Date对象
  • Firebase存储JSON数据
    • Date对象没有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(),
  });
};
相关文章：