如何用AngularFire在firebase中输入时间



我希望用户能够通过从输入框中选择时间向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(),
  });
};

相关内容

  • 没有找到相关文章

最新更新