如何使用 AngularFire 将时间输入到 Firebase？答案

【问题标题】：How to input a time into firebase with AngularFire?如何使用 AngularFire 将时间输入到 Firebase？
【发布时间】：2015-10-18 06:23:56
【问题描述】：

我希望用户能够通过从输入框中选择时间来将时间提交到 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

【问题讨论】：

标签： javascript angularjs html firebase angularfire

【解决方案1】：

这里发生了一些事情：

text 类型的输入（输入的默认类型）将返回一个字符串
time 类型的输入将返回一个 Date 对象
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(),
  });
};

【讨论】：

是否可以使用 .toString 与 ng-change 和 $save to 而不是 ng-submit 和 $add。 ng-submit 允许我在使用 toString() 推送之前操纵文本，但 ng-change 并没有真正提供看起来相同的选项。请参阅此处了解我的意思：codepen.io/chriscruz/pen/MaOqqQ?editors=101