kankamuso kankamuso - 2 months ago 11x
AngularJS Question

Show formatted substring from string in JS object

I have this HTML in ionic that fills up a list of cards:

<div class="list">
<div class="card" ng-repeat="item in eventsDay19">
<div class="item item-divider">
<b>{{item.eventHour}}</b> - <span style="font-style: italic;font-weight: bold;">{{item.eventTitle}}</span>
<div class="item item-text-wrap">
{{item.eventPlace}}<br />{{item.eventText}}

It is fed from objects defined in my JS controller like this:

$scope.eventsDay19 = [{ eventTitle: 'Pregón Anunciador de la Feria 2016 ', eventHour: '21:00', eventText: 'A cargo del deportista paralímpico D.XXX-XXXX', eventPlace: 'Parque de las Almadrabillas' }];

I want part of the 'eventText' member to be formatted using bold letters (more specifically, 'D.XXX-XXXX'). The rest should be normal text. I have tried adding CSS and HTML format tags around the substring but nothing works. I also tried using the bold() JS function with same result...

As I can see, including formatting tags on the JS string won't be translated to HTML code. Can you also point me to the internals of this mechanism to better understand how JS and HTML relate in this case?.

Thanks in advance,



You can use ngBindHtml directive

Inject ngSanitize, as below:

angular.module('moduleName', ['ngSanitize'];

Then, as example you can have this:

var str = "Aaa <strong>D.XXX-XXXX</strong>";


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<span ng-bind-html="str"></span>