Question

我的应用程序出现问题，通常，ng-class根据数据库中指示的时间显示不同的背景。

它适用于其他视图（主页和创建时），但在广告页面中，它默认为类＆＃34;晚上＆＃34; 。我整晚都在寻找，但是我无法找到问题所在，这就是我在控制台中所拥有的：

<div class="item night" ng-class="{"sunset":true}"></div>

在其他观点中（当它起作用时）：

<div class="item sunset" ng-class="{"sunset":true}"></div>

我精确地说：所有视图中的所有服务都是相同的。你知道它可能来自哪里吗？

HTML：

<div class="list">
  <div class="item" ng-class="{{ event.starthourid | setImageClass}}">
  <h2 class="text stable animated tada" id="eventtitle"> {{ event.nameid }} </h2> 
</div>

Service.JS：

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<22) {
      return {sunset: true};
    } else {
      return {night: true};
    }
  };
});

谢谢大家的阅读！（如果你愿意，我可以添加代码）

Answer 1

ng-class="{"sunset":true}"

应该是

ng-class="{sunset: true}"

或

ng-class="{'sunset': true}"

Answer 2

删除{{}}表达式周围的花括号ng-class。

以下是ng-class属性

的有效表达式

<div ng-class="className">

<div ng-class="getClassNameFunc()">

<div ng-class="{className: booleanValue}">

以下是一个示例代码段。

＆＃13;

var app = angular.module("myapp", []);

app.controller("testCntrl", function($scope) {
  $scope.isNight = false;
  $scope.checkNight = function() {
    $scope.isNight = !$scope.isNight;
  }

  $scope.getIsNight = function() {
    return $scope.isNight;
  }
})

＆＃13;

#div1 {
  width: 100px;
  height: 100px
}
.night {
  background-color: #000;
  color: #fff;
}
.day {
  background-color: #fff;
  color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="testCntrl">
    <div id="div1" ng-class="{night: getIsNight()}">
      <span ng-show="!isNight">Its Day </span>
      <span ng-show="isNight">Its Night </span>
    </div>
    <button ng-click="checkNight()">{{isNight ? "Day": "Night" }}</button>
  </div>
</div>

＆＃13;

Answer 3

我找到了解决方案：starthourid未定义，所以我在StateParams中传递了starthourid：

HTML：

<div class="card" ui-sref="tabevent({ eventid: event.$id, eventhour: event.starthourid })">

App.JS：

  .state('tabevent', {
    url: '/tabevent/:eventid/:eventhour',
    templateUrl: 'templates/tab-event.html',
    controller: 'EventCtrl',
  })

Controller.JS：

$scope.starthourid = $stateParams.eventhour

详情页面：

ng-class="{{starthourid | setImageClass}}"

现在它起作用了！

感谢您的所有时间，希望它可以帮助某人。 ;）

AngularJS - Ng-class选择错误的班级

3 个答案: