CODEWITHSUNDEEP
angularjs
raduken
raduken

Reputation: 2129

Display HTML in AngularJS

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/

Upvotes: 0

Views: 6541

Answers (4)

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3177

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); }}]);

Upvotes: 0

Serhii Holinei
Serhii Holinei

Reputation: 5884

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>

Upvotes: 1

MeTe-30
MeTe-30

Reputation: 2542

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>

Upvotes: 1

Wcan
Wcan

Reputation: 878

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.

Upvotes: 0

Related Questions