Faites-moi savoir si vous avez besoin de plus d'information.;-)
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;
}]);
解决方案
@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. ;-)
这篇关于AngularFire - 无法恢复用户在数据库中输入的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
