Format html from json

Question

I'm a beginner with AngularJs, this is my first try

I'm trying ti display data from a json link, and some fields contains html

Here is the json content :

[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}]

And i use this angularJs code to display the data

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("JSONLINK")
  .success(function (response) {$scope.names = response;});
});
</script>

The problem is, the field description is displayed as is in the json :

 - Titre18 <p>test</p> 
 - Titre18f <p>sdfsdfsd</p>

Is it possible to format this field as html ? I want the p tags to be interpreted as html

I use angularJs 1.3.15

Thanks a lot

Look at this answer: angular.js ng-repeat li items with html content — Yaar Hever
– Yaar Hever, Commented Mar 27, 2015 at 15:41

Felype · Accepted Answer · 2015-03-27 15:51:35Z

2

Try this:

<ul>
  <li ng-repeat="x in names" ng-bind-html="x.description">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>

Now notice ng-bind-html will evaluate the HTML in 'description' contents and render it 'safely', there is also ng-bind-html-unsafe if you want to bypass Angular's sanitize method. But be careful when using those, considering a wrong '>' symbol can break your entire page.

You also need to add a dependency on ngSanitize on your module.

angular.module('yourmodule', ['ngSanitize']);

Requires angular-sanitize.js docs: https://docs.angularjs.org/api/ngSanitize

And here is documentation for bind-html https://docs.angularjs.org/api/ng/directive/ngBindHtml

edited Mar 27, 2015 at 15:51

answered Mar 27, 2015 at 15:39

Felype

3,1362 gold badges27 silver badges36 bronze badges

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

6 Comments

user Over a year ago

Nothing is displayed when i tryed this

user Over a year ago

Tryed the unsafe, still has the <p>

Felype Over a year ago

try x.description instead in ng-bind-html.

user Over a year ago

Got this error : Error: [$injector:unpr] errors.angularjs.org/1.3.15/$injector/… at Error (native)

Felype Over a year ago

@user try adding ngSanitize dependency to your module, you'll have to include angular-sanitize.js as well, if I recall well.

|

Harpreet Singh · Accepted Answer · 2015-03-27 16:09:45Z

here is link to the code at plunker.a link!

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example62-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="bindHtmlExample" >
  <div ng-controller="ExampleController">
 <ul>
  <li ng-repeat="x in names" ng-bind-html="x.description">
    {{x.titre}}
    {{x.description}}
  </li>
</ul>
</div>
</body>
</html>

in script.js

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.names =[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}];
  }]);
})(window.angular);

Here you will see p tags are interpreted as html not as string.Hope this will help you

Community · Accepted Answer · 2017-05-23 11:54:20Z

0

If I understand right, you want to strip the

tags around the description text. See this link : angularjs to output plain text instead of html

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 27, 2015 at 15:36

Komo

2,1381 gold badge23 silver badges36 bronze badges

1 Comment

user Over a year ago

Sorry if my message wasn't clear. I don't wanna strip the html, i want to be interpreted

Collectives™ on Stack Overflow

Format html from json

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related