How to display infinity symbol in AngularJS

Question

I want to conditionally display a value or an infinity symbol in my Web Page.

I wanted to do something like this ..

<td class="rs-table-text" ng-if="batch.est_completion_time ">{{batch.est_completion_time}}</td>

That is if batch.est_completion_time is not empty then display whatever is coming from json .

And the json looks like :

{
  "batch_queue_name": "Batch Five",
  "start_date": "05/01/2017 12:18 A.M.",
  "end_date": "08/01/2017 03:37 A.M.",
  "est_completion_time":"∞",
  "completion_status": "42"
}

But it does not display the infinity symbol. Rather , it displays the ∞ text only. it does not display the infinity symbol. Rather , it displays the ∞ text only.

How to achieve the same ?

Answer 1

In your controller, prepare the data as following :

$scope.est_completion_time = $sce.trustAsHtml(batch.est_completion_time);

In your HTML, you can display it as it is. Don't forget to add ng-bind-html in the outer DOM element.

Adding only ng-bind-html can do the job :

ng-bind-html="batch.est_completion_time"