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

Answer 1

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="angular.js@1.5.x" 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>

Answer 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>

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

Question

2 answers

solution1
2 2017-10-30 17:26:13

solution2
1 ACCPTED 2017-10-30 13:31:13

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

Question

2 answers

solution1 2 2017-10-30 17:26:13

solution2 1 ACCPTED 2017-10-30 13:31:13

solution1
2 2017-10-30 17:26:13

solution2
1 ACCPTED 2017-10-30 13:31:13