CODEWITHSUNDEEP
javascripthtmlangularjs
test
test

Reputation: 85

Render html tags from AngularJS object

I've looked up similar questions on how to render html tags within angularJS but none of them worked for me because I am using ng-repeat. Anyone have any advice. 

     <div ng-repeat="o in SurveyResults.SurveyQuestions">
                    {{o.SurveyQuestionId}}
                    {{o.QuestionText}}
     </div>

My o.QuestionText has data such as <b>How well do we deliver on our promises?</b> <br />Consider our responsiveness to your requests, ability to meet deadlines and <i>accountability for the outcomes</i>.

It displays the tags without rendering the tags.

I did try putting this in my JS file

    homePage.directive('htmlSafe', function($parse, $sce) {
    return {
        link: function(scope, elem, attr) {
            var html = attr.ngBindHtml;
            if(angular.isDefined(html)) {
                var getter = $parse(html);
                var setter = getter.assign;
                setter(scope, $sce.trustAsHtml(getter(scope)));
            }
        }
    };
});

Then setting html bind in the repeat as such

 <div ng-repeat-html="o in SurveyResults.SurveyQuestions">
                    {{o.SurveyQuestionId}}
                    {{o.QuestionText}}
     </div>

Any other advice?

Upvotes: 0

Views: 112

Answers (1)

SSH
SSH

Reputation: 2553

Just use ng-bind-html, you don't need new directive

 <div ng-repeat="o in SurveyResults.SurveyQuestions">
                {{o.SurveyQuestionId}}
                <span ng-bind-html="o.QuestionText"></span>
 </div>

Upvotes: 1

Related Questions