angularjs - JS string containing interpolation

Question

Let's say my web app is getting an json response from the backend like the following:

[
    {id:1, description: 'this is an example 1, **value is ###**'},
    {id:2, description: 'this is an example 2, **value is ###**'},
    {id:3, description: 'this is an example 3, **value is ###**'}
]

There is some formatting syntax here. Text surrounded by ** means bold.

This part is easy. I just need to search ** and replace it with <b></b>, and then in the template I use ng-bind-html.

Now there is ###. That means I have to replace it with some dynamically-changing variable. We can do this easily in the template if the entire string is hard-coded:

<div>this is example 1, value is {{someVariable}}</div>

How do I construct such string from Javascript?

Answer 1

Could use a custom filter something like:

angular.module('myApp')
  .filter('htmlReplace', function() {
    // `input` is the description string, otherVar is `someVariable` in view
    return function(input, otherVar) {
       let html = input.replace(...// do your replacing           
       return html;
    }
  })

View

<div ng-bind-html="obj.description | htmlReplace: someVariable"></div>