How to return HTML tag from javascript?

Question

I have a list of data displayed using ng-repeat . I'm thinking that if it is possible to return HTML tag, it would be easier. Like this:

return '<span class="redHour">'+diffHours+'</span>;

but this does't work.

I have this HTML code:

<li><p class="table-data3" id="normal-hour">{{RT(order.purchaseTime)}}</p>  </li>

If the calculated purchase time is less than 4 I want the color of the p becomes red.

Function

$scope.RT = function(order) {
var timeDifference;
var currentDate;
var deadLine;
var diffDays;
var diffHours;
var diffMinutes;

currentDate = new Date();
deadLine = new Date(parseInt(order)); // setting purchase time Date Object
deadLine = new Date(deadLine.setDate(deadLine.getDate()+1)); // setting purchase time Date Object + 1 day
timeDifference = (deadLine.getTime()) - (currentDate.getTime()); // deadline data minus current date
var diffDays = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
var diffHours = Math.floor(timeDifference / (1000 * 60 * 60));
var diffMinutes = Math.floor((timeDifference-(diffHours*(1000 * 60 * 60))) / (1000 * 60));


    if(diffHours <= 4){
       //WHAT SHOULD I PUT HERE?
    }
    if (diffHours == 0 && diffMinutes > 0) {
        return diffMinutes +" Mins";
    }else if (diffHours <= 0) {
        diffHours = 0;
        return diffHours;
    }else if (diffHours == 1) {
        return diffHours + " Hour";
    }else {
        return diffHours +" Hours";
    }
}

THANK YOU!

Answer 1

Your $scope.RT function could return a CSS class and the value itself. You can add the CSS class to the p tag in your template to change the styling according to the value.

Answer 2

use ng-style in your DOM

<li><p class="table-data3" id="normal-hour" ng-style="setColor(order)">{{RT(order.purchaseTime)}}</p>  </li>

in controller

$scope.setColor = function(order){
  var color;
  //Do your math
 return{ 'background-color': color}
}

Answer 3

Modify your method to return object and use ngInit directive . Your method can return Object with properties {'text': String, 'display_red': Boolean} .

<div ng-repeat="item in date" ng-init="item_info = RT(item.purchaseTime)">
  <li ng-class="{inRed: item.displayRed}">
    <span class="table-data3" id="normal-hour">{{item.text}}</span> 
  </li>
</div>

Also I've used ngClass directive to dynamically assign css class inRed , so you have to add such css class to.

Also below is modified if..else from $scope.RT function:

var result = {'displayRed': False};
if(diffHours <= 4){
   result['displayRed'] = True;
}
if (diffHours == 0 && diffMinutes > 0) {
    result['text'] = diffMinutes +" Mins";
}else if (diffHours <= 0) {
    diffHours = 0;
    result['text'] = diffHours;
}else if (diffHours == 1) {
    result['text'] = diffHours + " Hour";
}else {
    result['text'] = diffHours +" Hours";
} 
return result

Answer 4

You can implement filter:

app.filter('hoursNow', function () {
    return function (ts) {
      var timeDifference = Date.now() - ts;
      var diffDays = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      var diffHours = Math.floor(timeDifference / (1000 * 60 * 60));
      var diffMinutes = Math.floor((timeDifference-(diffHours*(1000 * 60 * 60))) / (1000 * 60));

      if (diffHours < 4) {
        return '<span class="red">'+diffHours+'hrs</span>';
      }
      return '<span class="green">'+diffHours+'hrs</span>';
    }
});

And use it with ng-bind-html :

<p ng-bind-html="order.purchaseTime | hoursNow"></p>

Fiddle