Question

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

这是我的代码的一部分：

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

服务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;

}]);

Answer 1

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

你说你从Firebase获取了事件对象，你可以在你的HTML中重复它们，对吧？

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

如果你的event.starthourid与你的html中的日期过滤器一起使用，那么我们知道我们应该可以安全地传递给Date对象。我们将创建自己的过滤器，将event.starthourid转换为我们可以与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};
    }
  };
});

过滤器是工厂，因此请确保在模块上注册它们。上面我使用了你已经拥有的＆＃39; myApp＆＃39;模块。

现在你应该可以在你的重复中做到以下几点（不要忘记删除你在这里添加的硬编码＆＃34; sunrise＆＃34;类，然后只需将ng-class更改为使用新的过滤器）：

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

Faites-moi savoir si vous avez besoin de plus d＆＃39; information。 ; - ）

Answer 2

这行代码看起来不正确：

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

event在哪里定义？您已将$scope.event设置为上方 - 您的意思是使用它吗？
假设你解决了这个问题，你确定event.starthourid所持有的值是否适合传递给Date()构造函数？请查看here以查看其预期结果，并here查看一些示例。
这个不会破坏任何东西，但getHours()不接受任何参数。您可以这样做：var h = new Date(event.starthourid).getHours();

一般来说，您是否查看过浏览器的JavaScript调试器？如果设置断点，则可以逐行执行并检查程序状态。这应该可以帮助您缩小问题范围。 Here是如何在Chrome中执行此操作。

AngularFire - 无法恢复用户在数据库中输入的时间

2 个答案: