CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeat
N.Car
N.Car

Reputation: 492

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

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

Upvotes: 0

Views: 1803

Answers (2)

sahed moral
sahed moral

Reputation: 385

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>

Upvotes: 2

UncleDave
UncleDave

Reputation: 7188

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>

Upvotes: 2

Related Questions