如何使用 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(),
});
};
我希望用户能够通过从输入框中选择时间来将时间提交到 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(),
});
};