angularjs - 根据一天中的时间更改背景 DIV

Question

我所有的问题都在标题中:如何根据一天中的时间更改我的背景 DIV？

我尝试了传统的 Javascript :

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

    if (h < 06) i = "night.jpg";
    else if (h < 11) i = "sunrise.jpg";
    else if (h < 18) i = "sunny.jpg";
    else if (h < 21) i = "sunset.jpg";
    else i = "night.jpg";

document.getElementById("header-item").style.backgroundImage = "url("+i+")";

但是自从我遇到 ng-class 和 ng-style 后，我知道我一直做错了。我怎样才能以“Angular”方式完成上述任务？

Answer 1

我认为在这种情况下，使用 ngClass 会更好，因此如果您想更新图像位置，则不必记住这些样式来自哪里。当然，ngClass 和 ngStyle 都是指令，因此它们是在 AngularJS 中进行 DOM 操作的正确位置，如 @daniel-beck 所述。

以下是如何使用 ngClass 的示例:

var app = angular.module('demo', []);

app.controller('MyTimeCtrl', function($scope){
    var h = new Date().getHours();
    if (h <= 18) {
      $scope.time="day";
    } else {
      $scope.time="night";
    }
  
});

.main {
  height: 100vh;
  min-height: 100px;
}
.night {
  background-color: black;
  color: white;
}
.day {
  background-color: yellow;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="MyTimeCtrl" class="main" ng-class="time">
    <p>It's {{time}}!</p>
  </div>
</div>