CODEWITHSUNDEEP
javascripthtmlangularjs
nit710
nit710

Reputation: 164

Convert String to html in label AngularJS

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>.

Upvotes: 4

Views: 13261

Answers (3)

Alexi Coard
Alexi Coard

Reputation: 7742

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>

Upvotes: 10

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 3

YamneZ
YamneZ

Reputation: 120

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.

Upvotes: 1

Related Questions