AngularFire - Impossible To Recover The Time Entered By The User In Database

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 data

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

Solution 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.