CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeatng-bind-html
FabioEnne
FabioEnne

Reputation: 742

AngularJS ng-repeat with ng-bind-html to render strings of HTML in an array?

I'm trying to render HTML strings that comes from an array of HTML strings, I'm quite new to AngularJS and I tried to follow the examples from the AngularJs website, but it seems I can't figure out a proper way to do that.

Here is my plunker for a better understanding, I hope I explained myself, if not just ask for more clarifications. Thanks very much in advance for any help.

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example62-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
    <div ng-repeat="bit in myHTML">
     <p ng-bind-html="bit"></p>
 </div>
</div>
</body>
</html>

CONTROLLER

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    for (i=0; i<6; i++){
    $scope.myHTML[i] =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
    }
  }]);
})(window.angular);

PLUNKER EXAMPLE

Upvotes: 1

Views: 5169

Answers (3)

sahil gupta
sahil gupta

Reputation: 2349

HTML File

<div ng-controller="ExampleController">
    <div ng-repeat="bit in myHTML track by $index" >
     <p ng-bind-html="bit"></p>
 </div>

Javascript File

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = [];
    for (var i=0; i<6; i++){
    $scope.myHTML[i] =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
    }
    console.log($scope.myHTML)
  }]);
})(window.angular);

Please refer to the plunker

"http://plnkr.co/edit/z3KzKPtS1oKGlXI6REm8?p=preview"

Explaination:

The problem with your code is that the variable i in the loop is not defined. Also before assigning value to an array, you have to first initialize that array. So $scope.myHTML = [] must be writtern before writing values to it.

Also ng-repeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

So we have to use track by $index to support duplicates as per your need.

Upvotes: 2

RomanHotsiy
RomanHotsiy

Reputation: 5138

First of all you have js errors in your code: $scope.myHTML is used before initialized. So fix your controller the next way:

.controller('ExampleController', ['$scope', function($scope) {
  $scope.myHTML = []; // initialization added here
  for (var i=0; i<6; i++){ // var added here
   $scope.myHTML[i] =
   'I am an <code>HTML</code>string with ' +
   '<a href="#">links!</a> and other <em>stuff</em>';
  }
}]);

The second issue is with your template. ng-repeat errors when find duplicate values, so you need to add track by $index which will cause the items to be keyed by their position in the array instead of their value (more detailed read here):

<div ng-repeat="bit in myHTML track by $index">

Plunkr

Upvotes: 2

soaP
soaP

Reputation: 101

Firstly you for loop is not correct

// Note the 'var i = 0'
for (var i=0; i<6; i++){
    $scope.myHTML[i] =
        'I am an <code>HTML</code>string with ' +
        '<a href="#">links!</a> and other <em>stuff</em>';
}

Secondly the plunker throws an "Error: ngRepeat:dupes Duplicate Key in Repeater" error which means that angular has no way of identifying the elements of the array when it needs to update the html through databinding.

The following code works (note that I'm appending i in the html string which means that angular can identify each string as separate):

for (var i=0; i<6; i++){
    $scope.myHTML.push('am an <code>HTML</code>string ' + i + ' with <a   href="#">links!</a> and other  <em>stuff</em>');
}

Upvotes: 0

Related Questions