Represent html from JSON array using ng-bind-html - html

Question

I want to render HTML tags from a property of a JSON object and represent them in a modal.
I have this JSON object:
{
"fileUploadCategories": [
{
"id": "Bread",
"title": "GrandmaBread",
"info": "Some info text.",
"restService": "empty",
"detailedInfo": [ "<h1>Stedsnavn</h1>",
"",//line break
"<i>Some text on a new line.</i>",
"",//line break
"Some text on the next line again <b>Should be bold.</b>"]
},
{
"id": "Cake",
"title": "My Cake",
"info": "Info text blah.",
"restService": "empty",
"detailedInfo": "<b>Test</b> <br> This is a text on a new line <br> New line"
}
]
}
In my html i use angularjs with ng-repeat and ng-bind-html to bind the data to a bootstrap modal. Here is my code:
<div class="panel-group" id="accordion" ng-repeat="fileUpload in fileUploadConfig" >
<div class="panel panel-default" >
<div class="panel-heading">
<h3 class="panel-title">{{fileUpload.title}}</h3>
</div>
<div class="panel-body">
<p class="bg-info">{{fileUpload.info}}</p>
<div class="form-horizontal">
<button class="btn btn-primary" id="{{fileUpload.id}}HelpBox" style="float:right" data-toggle="modal" data-target="#{{fileUpload.id}}HelpModal">
Hjelp
</button>
</div>
</div>
</div>
<!-- Modal -->
<div id="{{fileUpload.id}}HelpModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{fileUpload.id}}Help</h4>
</div>
<div class="modal-body" ng-bind-html="fileUpload.detailedInfo">
{{fileUpload.detailedInfo.join('\n')}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
</div>
</div>
</div>
</div>
</div>
When I have my html text in an array it does not render as it is suppose to. (The first JSON object). It works fine in the second JSON object(just have to remove the .join('\n') ). The reason I have represented the HTML in an array is so that it will be easier to change the text later and see how it will render, instead out putting everything on a single line with html tags inside, which looks really messy.
Is there a better way than using an array to represent the data in the JSON object and get it to render the html tags?

Answer 1

I have created a sample for you in order to visualize what's going on. As you can see, applying angularjs markup to the array data type results in rendering "stringified" array:
<div>{{fields.test}}</div> => ["a","b","c"]
Now, I have big doubts that using an array is good idea at all. Semantically this is incorrect and is quite confusing. Just encode your html within the JSON and later decode it (known as sanitize in angular, see more here):
function MyControllerHtml($scope, $sce) {
$scope.renderHtml = function(value) {
return $sce.trustAsHtml(value);
};
$scope.html = '<h1>Stedsnavn</h1><br/><i>Some text on a new line.</i><br/>Some text on the next line again <b>Should be bold.</b>';
};
<div ng-controller="MyControllerHtml">
<div ng-bind-html="renderHtml(html)"></div>
</div>
Finally, if you still want to keep array, then use angular directive to bind your array into hml