CODEWITHSUNDEEP
angularjs
user7516351
user7516351

Reputation:

How to add html in angularjs coming in string format?

This function getStudentsNames(item.students); is returning a string as <br>Rom<br>Jay Clayton<br>Rom roy<br>.

I tried replacing <br> with \n but didn't have any effect. I'm not able to get a line break so if any one could help. Thanks.

<span class="tooltiptext">{{getStudentsNames(item.students);}}</span>

Upvotes: 3

Views: 2799

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27232

Try ngBindHtml directive.It evaluates the expression and inserts the resulting HTML into the element in a secure way.

DEMO

angular.module('myApp', ['ngSanitize'])
.controller('MyCtrl', function($scope) {
    $scope.HTMLString = "<br>Rom<br>Jay Clayton<br>Rom roy<br>";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-bind-html="HTMLString"></div>
</div>

Upvotes: 0

Burak Akyıldız
Burak Akyıldız

Reputation: 1644

You can use ng-bind-html for this.

angular.module("app",[]).controller("ctrl",function($scope){

  $scope.htmlData = "<br>Rom<br>Jay Clayton<br>Rom roy<br>";
  
  $scope.getStudentsNames = function(){
      return this.htmlData;
  }

}).filter('to_trusted', ['$sce', function($sce) {
	return function(text) {
		return $sce.trustAsHtml(text);
	};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app="app" ng-controller="ctrl" class="tooltiptext" ng-bind-html="getStudentsNames() | to_trusted"></span>

Upvotes: 1

Related Questions