3

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":"&infin;",
  "completion_status": "42"
}

But it does not display the infinity symbol. Rather , it displays the &infin; text only.

How to achieve the same ?

StrugglingCoder
  • 4,781
  • 16
  • 69
  • 103
  • So what you want is to make it evaluate HTML entities? – simbabque Jan 06 '17 at 12:49
  • Possible duplicate of [Using HTML Entities within Angular strings](http://stackoverflow.com/questions/21919533/using-html-entities-within-angular-strings) – simbabque Jan 06 '17 at 12:50
  • use `ng-bind-html="batch.est_completion_time"` – devqon Jan 06 '17 at 12:52
  • 2
    I feel like rather than sending HTML in your JSON response, you should just send something like `-1` or `infinity` and have a conditional in your Angular template that decides whether or not to display the symbol. Keep the presentational logic in the frontend, not in your API. – Joe Clay Jan 06 '17 at 12:53
  • @JoeClay That's a superb advice. I will implement the same. – StrugglingCoder Jan 06 '17 at 13:46

1 Answers1

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"
Zakaria
  • 14,892
  • 22
  • 84
  • 125