CODEWITHSUNDEEP
javascripthtmlangularjsng-bind-html
BartB
BartB

Reputation: 11

AngularJS ng-bind-html not rendering list tags

I have a simple HTML document, like...

<ol>
    <li><strong>Test 1</strong></li>
    <li><strong>Test 2</strong></li>
</ol>

...and I want to bind it to a div with ng-bind-html, but the HTML tag <ol> (or <li>) is not rendered.

The result I have is:

<strong>Test 1</strong>
<strong>Test 2</strong>

Any ideas?

Upvotes: 1

Views: 1141

Answers (3)

user4656987
user4656987

Reputation:

In order to use ng-bind-html, you need to include ngSanitize in your app declaration

Upvotes: 1

phani indra
phani indra

Reputation: 243

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <span ng-bind-html="trustedHtml"></span>
  </div>

  <script>
    var app = angular.module("myApp",[]);
    app.controller("myCtrl",["$scope","$sce", function($scope,$sce) {
    $scope.html = '<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>';
    $scope.trustedHtml = $sce.trustAsHtml($scope.html);
    }]);
  </script>
</body>

</html>

Upvotes: 0

user8317956
user8317956

Reputation: 

* {
  padding: 0;
  margin: 0;
}
ol li {
  list-style: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>

<body>

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

    <div ng-bind-html="myText"></div>

  </div>

  <script>
    var app = angular.module("myApp", ['ngSanitize']);
    app.controller("myCtrl", function($scope) {
      $scope.myText = "<ol><li><strong>Test 1</strong></li><li><strong>Test 2</strong></li></ol>";
    });
  </script>
</body>

</html>

ng-bind-html directive does it all. For more info, please visit https://docs.angularjs.org/api/ng/directive/ngBindHtml

Upvotes: 0

Related Questions