Trouble using ng-repeat in AngularJS to render HTML values

Question

I came across this post, which entails more or less exactly what I want to do: AngularJS - Is it possible to use ng-repeat to render HTML values?

As of right now, the code looks like this, rendering correctly as text:

<div ng-repeat="item in items.Items">
        {{item}}<br>
</div>

I want this to render as HTML now, so taking from that post, I have it looking something like this:

<div ng-repeat="item in items.Items" ng-bind-html-unsafe="item">
    <br>
</div>

However, nothing renders as a result. Does anyone know why that is? I have also tried setting ng-bind-html-unsafe to "{{item}}", which had no effect

Use ng-bind-html ... also out of curiosity what are you accomplishing with the 'br'? The ng-repeat suggests you are repeating the 'div', a div by default is display block, which would stack the elements the same way you would achieve with a breaking line — Nick Delaney
– Nick Delaney, Commented Mar 14, 2016 at 17:48
Have you brought in the $sanitize module? stackoverflow.com/questions/19415394/… — James Bateson
– James Bateson, Commented Mar 14, 2016 at 17:48

daniel · Accepted Answer · 2016-03-14 18:09:11Z

1

You should use ng-bind-html, and you could do that:

 $scope.myHTML = $sce.trustAsHtml('<b>some</b> html');

See the updated fiddle.

In your case use some function or pass the array in the controller first:

$scope.getHtml = function(v){
   return $sce.trustAsHtml(v);
};

edited Mar 14, 2016 at 18:09

answered Mar 14, 2016 at 18:03

daniel

1,1623 gold badges16 silver badges34 bronze badges

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

Comments

Shashank · Accepted Answer · 2016-03-20 13:14:44Z

It is always a good practice to mark the html that one is binding from the .js file to the .html which are in string format, as safe.

One way, it can be achieved is by making use of AngularJS's dependency injection with $sce. One can read more about it, in length here.

I have created a demo using a list, since you have shared only the HTML but not the JS, so I have assumed one and illustrated how to make use of it by trusting the HTML string using $sce.trustAsHtml().

Refer demo.

Please have a look at the code below:

HTML:

<div ng-app="app" ng-controller="test">
  <div ng-repeat="item in items" ng-bind-html="item">
  </div>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function($scope, $sce) {
  $scope.data = [{
    "Items": [{
      "data": "<p>Item 1</p>"
    }, {
      "data": "<p>Item 2</p>"
    }, {
      "data": "<p>Item 3</p>"
    }, {
      "data": "<p>Item 4</p>"
    }]
  }];
  $scope.items = [];
  angular.forEach($scope.data[0].Items, function(v, k) {
    $scope.items.push($sce.trustAsHtml(v.data));
  });
});

Collectives™ on Stack Overflow

Trouble using ng-repeat in AngularJS to render HTML values

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related