Angularjs Expression

Question

I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well

<div ng-controller="MyCtrl" >
{{level}}
</div>

that is it should be bold without using

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>

But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.

Is there anyway to achieve it.or am i totally wrong here?

you will need to use the Strict Conceptual Escaping service ($sce) and use ng-bind-html rather than expressions {{ }} — Claies
– Claies, Commented Jul 29, 2015 at 12:37
also, when submitting a fiddle with an issue, it is usually helpful to ensure that the version of angular in the fiddle is up to date. It is unlikely that you are working with angular 1.0.1 — Claies
– Claies, Commented Jul 29, 2015 at 12:50

Paul Boutes · Accepted Answer · 2015-07-29 12:48:58Z

2

You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Example :

app.js

angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
  $scope.data = '<b>my text</b>'
});

index.html

<div ng-controller="Controller">
 <p ng-bind-html="data"></p>
</div>

answered Jul 29, 2015 at 12:48

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

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

Comments

Ivan · Accepted Answer · 2015-07-29 12:39:32Z

1

You can use ng-bind-html-unsafe:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
    <div ng-bind-html-unsafe="level"></div>
</div>

Unsafe because the DOM should generally not be modified inside a controller.

answered Jul 29, 2015 at 12:39

Ivan

1645 bronze badges

Comments

sma · Accepted Answer · 2015-07-29 12:37:08Z

0

Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?

http://jsfiddle.net/u37xtpjd/2/

answered Jul 29, 2015 at 12:37

sma

9,5978 gold badges53 silver badges83 bronze badges

Comments

Daniel Cottone · Accepted Answer · 2015-07-29 12:43:47Z

0

You can accomplish this using the ng-bind-html directive:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
  <span ng-bind-html="level"></span>
</div>

answered Jul 29, 2015 at 12:43

Daniel Cottone

4,52029 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angularjs Expression

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related