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;
}]);
This line of code doesn't look right:
event
defined? You have set$scope.event
above - did you mean to use this instead?event.starthourid
is suitable to pass into theDate()
constructor? Take a look here to see what it expects and here for some examples.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.
@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:
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):
Faites-moi savoir si vous avez besoin de plus d'information. ;-)