Display HTML in AngularJS

Question

I have a angular coding what need insert html tags, I found out I can use ngSanitize :https://docs.angularjs.org/api/ngSanitize , but I don't whant load another library in that project.

I tried this: AngularJS : Render HTML in $scope variable in view

but I could not make work.

It's any way to do this without load another angular library?

html:

<div ng-controller="MyCtrl">
  <ul class="procedures">
    <li ng-repeat="procedure in procedures">
      <h4><a href="#" ng-click="show = !show">{{procedure.icon}}</a></h4>
      <div class="procedure-details" ng-show="show">
        <p>text here: {{procedure.text}}</p>
        <p>your number is: {{procedure.number}}</p>
        <p>price you will pay: {{procedure.price}}</p>
      </div>
    </li>
  </ul>
</div>

js:

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.procedures = [{
    icon: '<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>',
    text: 'test text',
    number: 1,
    price: 10000
  }];


}

jsfiddle:

http://jsfiddle.net/wD7gR/247/

Serhii Holinei · Accepted Answer · 2016-06-27 19:33:28Z

1

Starting from version 1.2.0, angular contains $sce service, that can be used to mark html as "safe"

UPDATED JSFIDDLE

angular
.module('myApp',[])
.controller('MyCtrl', function($scope, $sce) {
    $scope.procedures = [
        {
            icon: $sce.trustAsHtml('<i class="fa fa-american-sign-language-interpreting" aria-hidden="true">i am icon</i>'),
            text: 'test text',
            number: 1,
            price: 10000
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <ul class="procedures">
        <li ng-repeat="procedure in procedures">
            <h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon"></a></h4>
             <div class="procedure-details" ng-show="show">
                <p>text here: {{procedure.text}}</p>
                <p>your number is: {{procedure.number}}</p>
                <p>price you will pay: {{procedure.price}}</p>
             </div>
        </li>
    </ul>
  </div>
</div>

edited Jun 27, 2016 at 19:33

answered Jun 27, 2016 at 19:18

Serhii Holinei

5,8942 gold badges34 silver badges49 bronze badges

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

4 Comments

raduken Over a year ago

thanks it is what I want but your code is broken now display the div before I click in the icon.

Serhii Holinei Over a year ago

@Raduken a removed all the code, that is not related to the topic. I'm sure, you'll be able to add any logic for hide/show without a trouble ;-)

Serhii Holinei Over a year ago

@Raduken, anyway, I updated embedded code snippet with show/hide on click.

Serhii Holinei Over a year ago

@Raduken I'm really glad to help

MeTe-30 · Accepted Answer · 2016-06-27 19:19:58Z

1

Instead of using ngSanitize you can use $sce az filter like this:

Put this code in app.js :

app.filter('sce', ['$sce', function ($sce) {
    return $sce.trustAsHtml;
}]);

Then use in Html like this:

<h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon | sce"></a></h4>

answered Jun 27, 2016 at 19:19

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

4 Comments

raduken Over a year ago

thanks a lot but can you should me into my code? will be possible? thank you.

MeTe-30 Over a year ago

@Raduken Sorry, don't get what you mean?

raduken Over a year ago

how can apply what you said into this code? jsfiddle.net/wD7gR/247

MeTe-30 Over a year ago

@Raduken wait a moment

Wcan · Accepted Answer · 2016-06-27 19:18:35Z

0

I can tell u that u can do like below It should be as following

$scope.html = "<i class='fa fa-american-sign-language-interpreting' aria-hidden='true'></i>";

and

<div ng-bind-html-unsafe="html"></div>

You can do the same for for icon, text or whatever u like... I'm not sure how to do that right now cuz I'm typing this from mobile fone, i hope u will get the idea, if not plz leave comment and i'll write a full function once i get my hands on machine.

answered Jun 27, 2016 at 19:18

Wcan

8882 gold badges12 silver badges34 bronze badges

1 Comment

raduken Over a year ago

thanks, but can you should me how can apply this into my real code? I could not make work :(

Saniya syed qureshi · Accepted Answer · 2017-11-30 09:30:02Z

0

You can use angular-sanitize to insert HTML in a view.

Example is given in plnkr

app.filter("trust", ['$sce', function($sce) {return function(htmlCode){
return $sce.trustAsHtml(htmlCode); }}]);

answered Nov 30, 2017 at 9:30

Saniya syed qureshi

3,1973 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Display HTML in AngularJS

4 Answers 4

4 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related