Insert new html element into every ng-repeat (AngularJS)

Question

I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.

I'm doing ng-repeat of this array of objects:

$scope.items = [
  {name: "john", paragraph:"<p>hi, im john</p>"}, 
  {name: "rita", paragraph:"<p>hi, im rita</p>"}, 
  {name: "joe", paragraph:"<p>hi, im joe</p>"}
];

then in the html file I have:

  <div ng-repeat="item in items">
    <br>
    <br>
    <p>this is the beginning of {{$index}} box</p>
    <p>{{item.name}}</p>
    {{insertHTML(item.paragraph)}}
    <p>this is the end of {{$index}} box</p>
    <br>
    <br>
  </div>

the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element. Here's the function:

$scope.insertHTML = function(str) {
  var wrapper = document.createElement('div');
  wrapper.innerHTML = str;
};

I created this plunker where you can check the whole code running

I think you can do it with ng-bind-html="item.paragraph" if you import ngSanitize — Aleksey Solovey
– Aleksey Solovey, Commented Oct 30, 2017 at 13:30

UncleDave · Accepted Answer · 2017-10-30 14:03:45Z

2

You should use Angular's built in ng-bind-html and ngSanitize:

angular.module("demo", ["ngSanitize"]);

angular
  .module("demo")
  .controller("demoController", ["$scope", "$sce", function($scope, $sce) {

    $scope.items = [{
        name: "john",
        paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
      },
      {
        name: "rita",
        paragraph: "<p>hi, im rita</p>"
      },
      {
        name: "joe",
        paragraph: "<p>hi, im joe</p>"
      }
    ];
  }])

.red {
  background-color: red
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="demoController">

  <p>hello everyone</p>

  <div ng-repeat="item in items">
    <br>
    <br>
    <p>this is the beginning of {{$index}} box</p>
    <p>{{item.name}}</p>
    <div ng-bind-html="item.paragraph"></div>
    <p>this is the end of {{$index}} box</p>
    <br>
    <br>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>

</html>

edited Oct 30, 2017 at 14:03

answered Oct 30, 2017 at 13:31

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

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

3 Comments

N.Car Over a year ago

Thank you very much! It was that simple!

N.Car Over a year ago

This works for simple stuff. But what if paragraph was: '<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>' .It is not loading anything. You can check the plunker

UncleDave Over a year ago

iframes are not automatically trusted (for good reason) - if you must you can use $sce.trustAsHtml explicitly, I've updated my answer.

sahed moral · Accepted Answer · 2017-10-31 13:46:47Z

Try Directives. See demo here

var app = angular.module('plunker', []);
app.directive('myDir',function(){
  return{ 
    link : function(scope,element){
    element.append(' <br><br><p>this is the beginning of box</p>');
    element.append('<p>'+scope.item.name+'</p>');
    element.append(' <p>this is the end of box<br><br><br></p>');
  }}
})

app.controller('MainCtrl', function($scope) {
 $scope.items = [
  {name: "john", paragraph:"<p>hi, im john</p>"}, 
  {name: "rita", paragraph:"<p>hi, im rita</p>"}, 
  {name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
     <div ng-repeat="item in items">
       <my-dir></my-dir>
   
  </div>
  </body>

</html>

Collectives™ on Stack Overflow

Insert new html element into every ng-repeat (AngularJS)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related