current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

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

share|improve this question

3 Answers 3

up vote 1 down vote accepted

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.

share|improve this answer
up vote 1 down vote

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

share|improve this answer
up vote 0 down vote

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>');
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.