How can you add HTML markup in a Javascript array

Question

I need to add a small amount of HTML inside part of my Javascript array for the synopsis. Is there a method to do this as currently it outputs as text?

So far I have the below

app.controller('primaryServiceListController', ['$scope', '$http', function($scope, $http){
    $scope.serviceListings = [
        {
            url: "details.html",
            img: "service-01.jpg",
            sector: "Business",
            synopsis: "Completely synergize resource taxing relationships <strong>via premier niche markets</strong>. Professionally cultivate one-to-one customer service robust."
        }
    ]
}]);

'currently it outputs as text' - what does this mean? Can you show the relevant html snippet where this is used? — rmlan, Jun 11 '18 at 14:02
I think best practice is that HTML should be in a Component, and your array should store names (or references) of Components, rather than the HTML. If HTML is generated during run time, structure the Component that way. — jmbmage, Jun 11 '18 at 14:03
Possible duplicate of [Insert HTML into view](https://stackoverflow.com/questions/9381926/insert-html-into-view) — Heretic Monkey, Jun 11 '18 at 14:04
as text .. as in taxing relationships via premier niche markets — Al-76, Jun 11 '18 at 14:08

31piy · Answer 1 · 2018-06-11T14:43:52.877

You need to include ngSanitize in your app and then, in your template, you can bind the HTML easily using ng-bind-html directive:

<div ng-bind-html="serviceListings[0].synopsis"></div>

Please see the following working demo:

angular.module('app', ['ngSanitize'])
  .controller('ctrl', ['$scope', function($scope) {
    $scope.serviceListings = [{
      url: "details.html",
      img: "service-01.jpg",
      sector: "Business",
      synopsis: "Completely synergize resource taxing relationships <strong>via premier niche markets</strong>. Professionally cultivate one-to-one customer service robust."
    }]
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-bind-html="serviceListings[0].synopsis"></div>
</div>

This answer works best. I have a div with the controller and I added the ng-bind-html to the
tag .. so — Al-76, Jun 11 '18 at 14:53

score 1 · Answer 2 · answered Jun 11 '18 at 14:03

1

You can add it as a text and then use ng-bind-html in html to render it.

<element ng-bind-html="expression"></element>

answered Jun 11 '18 at 14:03

LucaP

638
1
12
34

wobsoriano · Answer 3 · 2018-06-11T14:08:19.477

You can render the string as html like this:

<div ng-bind-html="serviceListings[0].synopsis"></div>

You can also create a filter and sanitize the data using $sce if you want:

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

And to use it in the html file

<div ng-bind-html="serviceListings[0].synopsis | trustHtml"></div>

How can you add HTML markup in a Javascript array

3 Answers3