angularjsng-bind-html

How to display HTML from response as HTML in ng-repeat


I have n number of records coming from backend as HTML in array. I need to display the HTML response as HTML in my view. I tried ng-bind-html , but it takes the last value. Need assistance.

  $scope.res=  "data": [
            {
              "jd": "<p>this jd1</p>"
            },
            {
              "jd": "<li>this jd2</li>"
            },
            {
              "jd": "<ul>this jd3</ul>"
            },
            {
              "jd": "<p>this jd4</p>"
            }
          ]
        }

Html:

 <div ng-repeat="item in res">
    <div ng-bind-html ="item.jd">
    </div>

Solution

  • You can use $sce.trustAsHtml. See the documentation here.

    What you could do is:

    Add this line in your controller:

    $scope.trustAsHtml = $sce.trustAsHtml;
    

    And update your HTML like this:

    <div ng-bind-html ="trustAsHtml(item.jd)">
    

    Note that you should probably start using Angular 6 instead of AngularJS