javascript - 根据正在过滤的值更改字体颜色angularjs

Question

虽然问题类似于change the font color based on value angular js但是如果我们在表达式中使用过滤器会怎样:

HTML:

<span ng-class="{'time-elapsed': timestamp | timeElapsed != 'LIVE','time-elapsed-live': timestamp | timeElapsed == 'LIVE'}">{{timestamp | timeElapsed}}</span>

CSS:

.time-elapsed {
    color: black;
}
.time-elapsed-live {
    color: red;
}

JavaScript:

angular.module('appName', [])
.filter('timeElapsed', ['$filter', function($filter) {
    return function(input) {
      if(!input) {
        return "";
      }
      var currDate = new Date(Date.now());
      var inputDate = new Date(input);
      var diffDate = Math.abs(currDate.getTime()-inputDate.getTime());
      var diffHrs = Math.floor(diffDate/(1000 * 60 * 60));

      if(diffHrs < 1) {
        return "LIVE";
      }

      if(diffHrs < 24) {
        return diffHrs.toString() + "h";
      }

      var diffDays = Math.floor(diffHrs/24);

      if(diffDays<31)
        return diffDays.toString() + "d";

      var diffMonths=Math.floor(diffDays/31);

      if(diffMonths<12)
        return diffMonths.toString()+"mo";

      return Math.floor(diffMonths/12).toString()+"y";
    }
  }])

这段代码给我错误，因为显然我们不能在 ng-class 中放入像“timestamp | timeElapsed != 'LIVE'”这样的表达式。正确的做法是什么？

Answer 1

您可以尝试调用函数而不是直接调用过滤器。

这样改

<span ng-class="getTimeElapsedClass(timestamp)">{{timestamp | timeElapsed}}</span>

在 Controller 中注入(inject)您的过滤器，只需在您的过滤器名称后附加“Filter”

引用这个link有关这方面的更多信息。

在你的 Controller 中像这样定义这个函数

$scope.getTimeElapsedClass = function(timestamp ){
  var filterResult = timeElapsedFilter(timestamp)
  if(filterResult !== 'Live'){
     return 'time-elapsed'
  } else{
      return 'time-elapsed-live'
   }
}