изменить цвет шрифта, основанный на значении, которое фильтруется 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"; 
    } 
    }]) 

Этот код дает мне ошибки, потому что, по-видимому, мы не можем поставить выражение типа «timestamp | TimeElapsed! = «ЖИВОЙ»»внутри нг-класса. Что такое правильный способ сделать это?

Answer 1

Вы можете попробовать вызов функции вместо вызова фильтра напрямую.

Изменение как это

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

вводят свой фильтр в контроллере только прилагая «фильтр» после названия фильтров

link Смотрите это для получения дополнительной информации по этому вопросу.

в контроллере определяют эту функцию следующим образом:

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