CODEWITHSUNDEEP
htmlangularjsmongodbsummernote
Santhoshkumar
Santhoshkumar

Reputation: 780

Retrieving HTML from MongoDB for use in angular project

I am using summernote editor in my project, while storing the content its storing as string,

var app = angular.module('myApp', []);

app.controller('indexController', function($scope){

$scope.data = [{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
},{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
} ]

});
.divClass{
margin-bottom: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

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

<div ng-repeat="txt in data" class="divClass">{{txt.text}}</div>
</div>

i tried ng-bind-html also but its not working, please help me to fix this issue.

Upvotes: 0

Views: 65

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

use the $sce.trustAsHtml to render the string in to html. make sure to inject the $sce to the controller.

create a filter and use it in the html 

app.filter('render',function($sce){
      return function(html) {
         return $sce.trustAsHtml(html)
      }
})

call it in the template using ng-bind-html 

<div ng-repeat="txt in data" class="divClass">
      <div ng-bind-html="txt.text | render">

      </div>
</div>

Demo

var app = angular.module('myApp', []);
app.filter('render',function($sce){
  return function(html) {
     return $sce.trustAsHtml(html)
  }
})
app.controller('indexController', function($scope, $sce){
$scope.data = [{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
},{
text:"<p><strong style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">Lorem Ipsum</strong><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">&nbsp;is simply dummy<i> <b>text of the printing</b></i> and <u>typesetting industry.</u> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p><ol><li><span style=\"font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;\">I</span>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li><li>It has survived not only five<sup>fgfggfgfg.</sup></li><li>kjkjkjk<sub>jkjk</sub></li><li>ghgfhgfhgfhfghgfhfghgfhfghgfdhgjgj.</li></ol>"
} ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app ="myApp" ng-controller="indexController">
 
<div ng-repeat="txt in data" class="divClass">
  <div ng-bind-html="txt.text | render">
  
  </div>
</div> 
</div>

Upvotes: 1

Related Questions