I have an angular snippet in which I want to convert string to HTML object.
`<div class="row">
<label class="col-md-4 info_text">Remarks<span>:</span></label> <label
class="col-md-8 fieldValue">{{initialTableInfo.comments}}
</label>
</div>`
The initialTableInfo.comments has the value <b>someText</b>. It is getting printed as it is. I want "someText" to be printed as someText instead of <b>someText</b>.
You can use the $sce parameter for angular.
module.controller('myctrl', ['$scope', '$http', '$sce',function($scope, $http, $sce) {
$scope.initialTableInfo.comments = $sce.trustAsHtml("<b>Some Text<b>");
}]);
And in your HTML use ng-bind-html
<label class="col-md-8 fieldValue" ng-bind-html="initialTableInfo.comment"> </label>
You can render string to html using $sce.trustAsHtml(html) and use ng-bind-html.
DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.initialTableInfo ={};
$scope.initialTableInfo.comments = '<b>someText</b>';
})
.filter('trustHtml',function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="background-white p20 reasons" >
<h6><b>About {{aboutlongs[0].name}}</b></h6>
<div class="reason-content" ng-bind-html="$scope.initialTableInfo.comments | trustHtml" >
</div>
</div>
</div>You should check this link https://docs.angularjs.org/api/ng/directive/ngBindHtml.
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
As Alexi mentioned, be sure to have the correct syntax on the controller too.
