如何从javascript返回HTML标记？

我有一个使用ng repeat显示的数据列表。 我在想，如果有可能返回HTML标记，那就更容易了。 像这样：

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

返回“+diffHours+”；

但这不起作用

我有以下HTML代码：

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

{{RT（order.purchaseTime）}

如果计算的购买时间小于4，我希望p的颜色变为红色

作用

$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";
    }
}

$scope.RT=函数（顺序）{
var时差；
var当前日期；
var期限；
两天；
var时间；
5分钟；
currentDate=新日期（）；
截止日期=新日期（parseInt（order））；//设置购买时间日期对象
deadLine=新日期（deadLine.setDate（deadLine.getDate（）+1））；//设置购买时间日期对象+1天
时差=（deadLine.getTime（））-（currentDate.getTime（））；//截止日期数据减去当前日期
var diffDays=数学下限（时差/（1000*60*60*24））；
var diffHours=数学楼层（时差/（1000*60*60））；
var diffMinutes=数学楼层（（时差-（diffHours*（1000*60*60））/（1000*60））；
如果（0小时）{
返回diffMinutes+“Mins”；
}否则如果（diffHours您的$scope.RT函数可以返回CSS类和值本身。您可以将CSS类添加到模板中的p标记，以根据值更改样式。
您的$scope.RT函数可以返回CSS类和值本身。您可以将CSS类添加到模板中的p标记，以更改样式ng到值。
在DOM中使用
ng样式

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

在DOM中使用
ng样式

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

修改您的方法以返回对象并使用。您的方法可以返回具有属性的对象
{'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>

修改您的方法以返回对象并使用。您的方法可以返回具有属性的对象
{'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>

您可以实现以下过滤器：

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>';
    }
});

您可以实施过滤器：

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>';
    }
});

请参阅@ebinmanuval answer以获取代码示例。我对AngularJS不太熟悉请参阅@ebinmanuval answer以获取代码示例。我对AngularJS不太熟悉。它工作得很好。非常感谢vp_arth先生！上帝保佑：）非常感谢vp_arth先生！上帝保佑：）谢谢！：）上帝保佑。谢谢！：）上帝保佑。