AngularFire

Question

我已经在 DIV 中发布了我的背景图片的先例问题。它在当前日期成功运行。但是当我想根据用户在模型 "starthourid" 的数据库中输入的时间调整背景图像时，它不起作用（它显示 "night"）！但是数据库没问题，我可以在HTML中显示"nameid"，在"starthourid"中显示"startdateid"。

这是我的代码的一部分：

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>

控制器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

这行代码看起来不对：

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

event定义在哪里？您在上面设置了 $scope.event - 您是想用这个代替吗？
假设你解决了这个问题，你确定 event.starthourid 持有的值适合传递给 Date() 构造函数吗？看看 here to see what it expects and here 的一些例子。
这个不会破坏任何东西，但是 getHours() 不接受任何参数。你可以这样做：var h = new Date(event.starthourid).getHours();

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

Answer 2

@MikeChamberlain 给了你一些要点，但我认为这会帮助你走上正轨：

您说过您正在从 Firebase 取回事件对象，并且您可以在 html 中重复它们，对吧？

如果那是正确的，那么接下来我们需要做的就是操纵 event.starthouid 的值，使其 returns 日出、日落等的值。

如果您的 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};
    }
  };
});

过滤器是工厂，因此请确保将它们注册到模块中。上面我使用了您已经拥有的 'myApp' 模块的参考资料。

现在您应该可以重复执行以下操作（不要忘记删除您在此处添加的硬编码 "sunrise" class，然后只需更改 ng-class 使用新过滤器):

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

Faites-moi savoir si vous avez besoin de plus d'information。 ;-)

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

AngularFire - impossible to recover the time entered by the user in database

javascript

ionic-framework

ionic