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
– rmlan, Commented Jun 11, 2018 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. — user3180309
– user3180309, Commented Jun 11, 2018 at 14:03
as text .. as in taxing relationships <strong>via premier niche markets</strong> — Al-76
– Al-76, Commented Jun 11, 2018 at 14:08

LucaP · Accepted Answer · 2018-06-11 14:03:07Z

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, 2018 at 14:03

LucaP

7283 gold badges12 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

31piy · Accepted Answer · 2018-06-11 14:43:52Z

1

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>

edited Jun 11, 2018 at 14:43

answered Jun 11, 2018 at 14:02

31piy

23.9k6 gold badges51 silver badges69 bronze badges

1 Comment

Al-76 Over a year ago

This answer works best. I have a div with the controller and I added the ng-bind-html to the <p> tag .. so <p ng-bind-html="serviceListings[0].synopsis">

wobsoriano · Accepted Answer · 2018-06-11 14:08:19Z

0

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>

edited Jun 11, 2018 at 14:08

answered Jun 11, 2018 at 14:02

wobsoriano

13.5k25 gold badges106 silver badges179 bronze badges

Collectives™ on Stack Overflow

How can you add HTML markup in a Javascript array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related