javascript - 从 Firebase、angularJS 检索日期

Question

我使用的是 Firebase 2.0.4 和 AngularFire 0.9.0。

我在编辑器中从 Firebase 检索日期时遇到问题。

首先，让我向您展示我是如何保存它的。我意识到 Firebase 不会采用日期类型，因此我在推送时将其转换为字符串。

$scope.AddPost = function () {
        var title = $scope.article.title;
        var tech  = $scope.article.tech;
        var date  = $scope.article.date;
        var post  = $scope.article.post;

        var firebaseObj = new Firebase("https://xxxxxxxx.firebaseio.com/articles");
        var fb = $firebase(firebaseObj);

        fb.$push({
            title: title,
            tech: tech,
            date: date.toString(),
            post: post,
            emailId: CommonProp.getUser()
        }).then(function (ref) {
            console.log("ref: "+ref);
            $location.path('/welcome');
        }, function (error) {
            console.log("Error:", error);
        });
    };

注意 date: date.toString(), 行。

它将日期保存在 Firebase 中，如下所示:"2016-01-07T05:00:00.000Z"

现在，我有一个内置于 Bootstrap 模式中的编辑器。

正如您在上面所看到的，我从数据库中检索其他项目没有问题，但我不确定如何让日期显示在日期输入字段中。日期输入字段中仅显示占位符。

更新这是 editPost 和 update 函数。

editPost 函数从数据库检索数据...更新函数将对数据的更改推送回数据库。

.controller('WelcomeCtrl', ['$scope', '$firebase', 'CommonProp', function ($scope, $firebase, CommonProp) {
    $scope.username = CommonProp.getUser();
    var firebaseObj = new Firebase("https://12202015.firebaseio.com/articles");


    var sync = $firebase(firebaseObj);

    $scope.articles = sync.$asArray();

    $scope.editPost = function (id) {
        console.log(id);
        var firebaseObj = new Firebase("https://12202015.firebaseio.com/articles/" + id);

        var syn = $firebase(firebaseObj);

        //$scope.postToUpdate.date = new Date( snapshot.val().date );
        console.dir("$syn: "+ syn.date);

        $scope.postToUpdate = syn.$asObject();

        $('#editModal').modal();
    };

    $scope.update = function () {
        console.log($scope.postToUpdate.$id);
        var fb = new Firebase("https://12202015.firebaseio.com/articles/" + $scope.postToUpdate.$id);
        var article = $firebase(fb);
        article.$update({
            title: $scope.postToUpdate.title,
            tech: $scope.postToUpdate.tech,
            date: $scope.postToUpdate.date,
            post: $scope.postToUpdate.post,
            emailId: $scope.postToUpdate.emailId
        }).then(function (ref) {
            console.log(ref.key()); // bar
            $('#editModal').modal('hide');
        }, function (error) {
            console.log("Error:", error);
        });
    };


    $scope.confirmDelete = function (id) {
        var fb = new Firebase("https://12202015.firebaseio.com/articles/" + id);
        var article = $firebase(fb);
        $scope.postToDelete = article.$asObject();
        $('#deleteModal').modal();
    };

    $scope.deletePost = function () {
        var fb = new Firebase("https://12202015.firebaseio.com/articles/" + $scope.postToDelete.$id);
        var article = $firebase(fb);
        article.$remove().then(function (ref) {
            $('#deleteModal').modal('hide');
        }, function (error) {
            console.log("Error:", error);
        });
    };

    $scope.logout = function(){
        CommonProp.logoutUser();
    };

}]);

这是我的编辑模式:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="editModalLabel">Update Post</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Title:</label>
                                <input type="text" class="form-control" ng-model="postToUpdate.title" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Technology:</label>
                                <input type="text" class="form-control" ng-model="postToUpdate.tech" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Completion Date:</label>
                                <input type="date" class="form-control" ng-model="postToUpdate.date" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="message-text" class="control-label">Post:</label>
                                <textarea class="form-control" id="message-text" ng-model="postToUpdate.post"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-click="update()">Publish</button>
                    </div>
                </div>
            </div>
        </div>

这个date: new Date($scope.postToUpdate.date)显然不起作用。

Answer 1

参见extending factories 。从服务器更新数据时，使用 $$updated 方法转换数据，并在将本地数据保存回服务器之前使用 toJSON 方法转换数据。

可以找到此代码的工作 fiddle here .

<button ng-click="setDate(book)">update the date</button>

<h2>Formatted</h2>
{{book.title}}<br />
{{book.author}}<br />
{{book.date|date:"medium"}}<br />

<h2>Raw</h2>
<pre>{{book|json}}</pre>

// reference to our Firebase instance
var fb = new Firebase('https://kato-sandbox-books.firebaseio-demo.com/book1');

/**
 * Our Angular module and controller
 */
var app = angular.module('app', ['firebase']);
app.controller('ctrl', function ($scope, Book) {    
    // create a synchronized array with a customized version 
    // of $FirebaseArray
    $scope.book = new Book(fb);

    // changes the date on a book record, note that we're working
    // with Date objects here
    $scope.setDate = function(book) {
        book.date = new Date();
        book.$save();
    };
});

/**
 * Add a Book factory object which parses dates
 */
app.factory('Book', function ($firebaseObject) {
    return $firebaseObject.$extend({
        /**
         * Called each time there is an update from the server
         * to update our Book data
         */
        $$updated: function (snap) {
            // call the super
            var changed = $firebaseObject.prototype
                .$$updated.apply(this, arguments);
            // manipulate the date
            if( changed ) {
               this.date = new Date(this.date||0);
            }
            // inform the sync manager that it changed
            return changed;
        },

        /**
         * Used when our book is saved back to the server
         * to convert our dates back to JSON
         */
        toJSON: function() {
            return angular.extend({}, this, {
                // revert Date objects to json data
                date: this.date? this.date.getTime() : null
            });
        }
    });
});