The AngularJS's ng-bind-html directive doesn't display correctly unordered list

Question

The code:

var appModule = angular.module('lookbookApp',
    [
        'ngSanitize',
    ])

appModule.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

<div class="text pre-txt" ng-bind-html="caseStudy.Overview | to_trusted"></div>

The content of caseStudy.Overview:

<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
</ul>

The expected output:

<ul>
  <li>aaaa</li>
  <li>bbbb</li>
  <li>cccc</li>
  <li>dddd</li>
</ul>

I've read articles on internet devoted to this issue, but my unordered list is still displayed as:

   aaaa
   bbbb
   cccc
   dddd

How to resolve this issue?

https://jsfiddle.net/ebinmanuval/0tLso4vg/3/ |which is your angular version? — Ebin Manuval, Aug 02 '16 at 06:22
@Raman Sahasi, Please, take a look at the expected result above. — tesicg, Aug 02 '16 at 06:27
My guess is that your text or pre-txt CSS class renders lists without bullets. Inspect the generated HTML code. — JB Nizet, Aug 02 '16 at 06:27
If you want the output to be HTML markup, then you shouldn't use ng-bind-html. ng-bind-html is precisely used to render HTML as HTML-formatted. Use ng-bind (or simply {{ }}): that will escape all the HTML special characters and display the HTML markup. To be clear, if you have a variable containing `hello`, and want to display it as `hello`, than use ng-bin or {{}}. If you want to render it as **hello**, then use ng-bind-html. — JB Nizet, Aug 02 '16 at 06:29
Try something like this to test if `css` is not interfering with your view - ` — daan.desmedt, Aug 02 '16 at 06:32
pre-txt is doing this: .pre-txt { white-space: pre-line; word-wrap: break-word; } — tesicg, Aug 02 '16 at 06:43

score 0 · Answer 1 · edited May 23 '17 at 12:32

If I understood you correctly, then you want to render HTML instead of rendered text.

If that's the case, then you shouldn't be using ng-bind-html

ng-bind-html
ng-bind-html renders the html instead of showing html tag.

See the difference here.

Use this code

<!DOCTYPE html>
<html ng-app="lookbookApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-sanitize.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div class="text pre-txt" ng-bind="caseStudy.Overview | to_trusted"></div>
    
    <script>
      
      var appModule = angular.module("lookbookApp", ['ngSanitize']);

      appModule.controller("myCtrl", ['$scope', function($scope) {
        $scope.test = "Hello World";
        $scope.caseStudy = {};
        $scope.caseStudy.Overview = '<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>';
      }]);
      
      
      appModule.filter('to_trusted', ['$sce', function ($sce) {
          return function (text) {
              return $sce.trustAsHtml(text);
          };
      }]);


      
    </script>
  </body>

</html>

Output

<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

Please, don't get me wrong, but are you sure that is needed any answer for this question, since there's nothing wrong? — developer033, Aug 02 '16 at 06:49

score -2 · Answer 2 · answered Aug 02 '16 at 06:39

-2

You code works well.

$scope.caseStudy = {
    "Overview": "<ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>"
};

Have a look at the demo.

answered Aug 02 '16 at 06:39

Shashank

2,010
2
18
38

The AngularJS's ng-bind-html directive doesn't display correctly unordered list

2 Answers2