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](http://stackoverflow.com/questions/19111337/angular-js-ng-repeat-li-items-with-html-content) — Yaar Hever, Mar 27 '15 at 15:41

Felype · Accepted Answer · 2015-03-27T15:51:35.523

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 '15 at 15:51

answered Mar 27 '15 at 15:39

Felype

3,087
2
25
36

Nothing is displayed when i tryed this – user Mar 27 '15 at 15:41
Tryed the unsafe, still has the
– user Mar 27 '15 at 15:43
try x.description instead in ng-bind-html. – Felype Mar 27 '15 at 15:45
Got this error : Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=htmlToPlaintextFilterProvider%20%3C-%20htmlToPlaintextFilter at Error (native) – user Mar 27 '15 at 15:46
@user try adding ngSanitize dependency to your module, you'll have to include angular-sanitize.js as well, if I recall well. – Felype Mar 27 '15 at 15:50
With Sanitize, and this way
it worked. Thanks a lot – user Mar 27 '15 at 15:58

score 1 · Answer 2 · answered Mar 27 '15 at 16:09

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

score 0 · Answer 3 · edited May 23 '17 at 11:54

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 '17 at 11:54

Community

1
1

answered Mar 27 '15 at 15:36

Komo

2,043
1
22
35

Sorry if my message wasn't clear. I don't wanna strip the html, i want to be interpreted – user Mar 27 '15 at 15:43

Format html from json

3 Answers3