AngularFire - impossible to recover the time enter

问题:

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>

Controller 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'); 
};

Services 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;

}]);

回答1:

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

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

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.

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};
    }
  };
});

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

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. ;-)

回答2:

This line of code doesn't look right:

var h = new Date(event.starthourid).getHours(event.starthourid);

1. Where is event defined? You have set $scope.event above - did you mean to use this instead?
2. Assuming you fix that, are you sure that the value held by event.starthourid is suitable to pass into the Date() constructor? Take a look here to see what it expects and here for some examples.
3. This one won't break anything, but getHours() does not take any parameters. You can just do: var h = new Date(event.starthourid).getHours();

In general, have you looked into your browser's JavaScript debugger? If you set a breakpoint then you can step through line by line and examine the program state. This should help you narrow down your problem. Here is how to do it in Chrome.