AngularFire - 无法恢复用户在数据库中输入的时间 [英] AngularFire - impossible to recover the time entered by the user in database

问题描述

我在DIV中发布了背景图像的先例问题。它与当前日期成功合作。
但是当我想用模型starthourid在数据库中输入用户输入的时间背景图像时，它不起作用（它显示夜晚）！
但数据库没问题，我可以在HTML中显示nameid，在starthourid中显示startdateid。

I've posted a precedent issue with my Background image in DIV. It's work successfully with current date. But when I want to adapt Background Image with time entered by user in database with model "starthourid", it's don't work (It display "night") ! But the database is OK, I can display "nameid" in HTML and "startdateid" with "starthourid".

这是我的代码的一部分：

This is a part of my code :

HTML：

<div ng-repeat="event in events">

    <div class="card" >
        <div class="sunrise item item-divider" ng-class="time">
        <h2 class="text stable"> {{ event.nameid }} </h2>
        <h3 class="text stable" id="header-date">
        <i class="icon ion-clock"></i> Le {{ event.startdateid | date : "d MMM" }} à {{ event.starthourid | date : "HH:mm" }}</p>
      </div>
      <div class="row">
      <div class="col">
        <h3><i class="icon ion-ios-location"></i> location</h3></div>
      <div class="col"><h3><i class="icon ion-ios-people">
        </i> people</h3></div>
      </div>
      <button class="button button-stable" id="positive-btn-price" disabled>price</button>
      <img class="imgProfilEventPositive" src="{{ event.userid.facebook.cachedUserProfile.picture.data.url }}">
      <div class="item item-divider" id="footerEventNotepositive"><p> <i class="fa fa-star"></i> note </p> </div>
        </div>
      </div>

</div></div>

控制器JS：

$scope.events = Event.all;

  $scope.event = {'nameid': ''};

    var h = new Date(event.starthourid).getHours(event.starthourid);
    if (h>=6 && h<11) {
      $scope.time="sunrise";
    } else if (h>=11 && h<18) {
      $scope.time="day";
    } else if (h>=18 && h<21) {
      $scope.time="sunset";
    } else {
      $scope.time="night";
    }


    $scope.create = function() {
    $state.go('tabstep1');
};
$scope.close = function() { 
     $state.go('tabdash'); 
};

服务JS：

myApp.factory("Event", ["$firebaseArray", "$firebaseObject", function($firebaseArray, $firebaseObject) {
var eventRef = new Firebase('https://myApp.firebaseio.com/Events/');
var userRef = new Firebase('https://myApp.firebaseio.com/Users/');
var events = $firebaseArray(eventRef);

     var Event = {

         all: events,

         get: function (event){
          var eventInfo = $firebaseObject(eventRef);
          event.startdateid = new Date(event.startdateid);
          event.starthourid = new Date(event.starthourid);
                return $firebaseObject(eventRef.child('Events').child(userid));

              }
            ,
        add: function (event){
          var eventInfo = $firebaseArray(eventRef, userRef);
          event.userid = userRef.getAuth();
          event.startdateid = new Date(event.startdateid).toJSON();
          event.starthourid = new Date(event.starthourid).toJSON();
                return eventInfo.$add(event);
              }
       }
       return Event;

}]);

推荐答案

@MikeChamberlain给了你一些好点，但是我认为这有助于您走上正轨：

@MikeChamberlain gave you some good points to follow, but I think this will help get you on track:

您说您从Firebase获取了事件对象，并且您可以在html中重复它们， 对？

You said that you're getting back the events object from Firebase and you're able to repeat over them in your html, right?

如果这是正确的，那么接下来我们需要做的是操纵event.starthouid的值，以便它返回日出，日落等值。

If that's correct, then the next thing we need to do is manipulate the values of the event.starthouid so that it returns the values of sunrise, sunset etc.

如果你的event.starthourid与html中的日期过滤器一起使用，那么我们知道我们应该可以安全地传递给Date对象。我们将创建自己的过滤器，将event.starthourid转换为我们可以与ngClass一起使用的对象：

If your event.starthourid works with the date filter in your html, then we know we should have something we can safely pass to the Date object. We're going to create our own filter to convert the event.starthourid to an object we can use with ngClass:

myApp.filter('setImageClass', function(){
  return function(input) {
    var h = new Date(input).getHours();
    if (h>=6 && h<11) {
      return {sunrise: true};
    } else if (h>=11 && h<18) {
      return {day: true};
    } else if (h>=18 && h<21) {
      return {sunset: true};
    } else {
      return {night: true};
    }
  };
});

过滤器是工厂，因此请确保在模块上注册它们。上面我使用了你对'myApp'模块已有的参考。

Filters are factories, so make sure you register them on a module. Above I used the reference you already have for the 'myApp' module.

现在你应该可以在重复中执行以下操作（不要忘记删除您在此处添加的硬编码sunrise类，然后只需更改ng-class以使用新过滤器）：

Now you should be able to do the following in your repeat (don't forget to remove the hard-coded "sunrise" class that you added here and then just change the ng-class to use the new filter):

<div ng-repeat="event in events" ng-class="{{event.starthourid | setImageClass}}">

Faites-moi savoir si vous avez besoin de plus d'information。 ; - ）

Faites-moi savoir si vous avez besoin de plus d'information. ;-)

这篇关于AngularFire - 无法恢复用户在数据库中输入的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！