CODEWITHSUNDEEP
angularjs
Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Outputting HTML inside ng-repeat in AngularJS

My $scope contains the following items

$scope.items= [
    { body : '<span> value </span>' },
    { body : '<span> whatever </span>' }
];

When I try

<li ng-repeat="item in items">{{item.body}}</li>

The HTML output is:

<li>&lt;span&gt; value &lt;/span&gt;</li>
<li>&lt;span&gt; whatever &lt;/span&gt;</li>

And then the text that appears on the browser is like this:

<span> value </span>
<span> whatever </span>

How do I escape the span and make them get parsed as HTML?

Edit: The link in the accepted answer no longer works for the latest version. Currently this is how you do it

Upvotes: 2

Views: 2660

Answers (2)

Damian Green
Damian Green

Reputation: 7495

The links in the accepted answer no longer work for the current version of Angular. You can do something like this to disable escaping if you're sure it's sanitised. Updated link to Strict Contextual Escaping: https://docs.angularjs.org/api/ng/service/%24sce

var app = angular.module('search-app')
                 .config(['$sceProvider', function ($sceProvider) {
                     $sceProvider.enabled(false) ;// global override
                  }]);

   app.controller('SearchController', function ($scope, $http) {

   }

Upvotes: 0

Karen Zilles
Karen Zilles

Reputation: 7661

Look at ngBindHtmlUnsafe if you're absolutely sure that the code you're creating can't contain any exploits from user data:

http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

Look at ngBindHtml from the Sanitize module if you need to sanitize a possibly hazardous piece of html:

http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

Upvotes: 3

Related Questions