3

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>
Improve this question
5
  • can be fixed using css Commented May 6, 2017 at 9:52
  • No it's not a kind of problem that can be fixed using css Burak's answer worked for me Commented May 11, 2017 at 9:45
  • Sure it can if all you want is line breaks. Read up on css white-space property Commented May 11, 2017 at 11:37
  • An example would be a better option as I'm a kind of newbie. Commented May 11, 2017 at 12:34
  • a google search would take you to css docs that would show examples Commented May 11, 2017 at 16:09

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Any way besides using filter I've already added a lot of code for a small function.BTW thanks
The filter is just for security. ng-bind-html does the job
0

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>

Improve this answer

Comments