AngularJS ng-repeat с ng-bind-html для визуализации строк HTML в массиве?

Я пытаюсь отобразить строки HTML, которые поступают из массива строк HTML, я довольно новичок в AngularJS, и я попытался следовать примерам с сайта AngularJs, но, похоже, я не могу найти правильный путь для этого.AngularJS ng-repeat с ng-bind-html для визуализации строк HTML в массиве?

Вот мой плункер для лучшего понимания, надеюсь, я объяснил сам, если бы не просто попросил больше разъяснений. Большое спасибо за любую помощь.

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

источник

2015-07-20 FabioEnne

HTML файл

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

Javascript Файл

(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);

Пожалуйста, обратитесь к plunker

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

Explaination:

Проблема с кодом является то, что в цикле переменная i не определена. Также перед назначением значения массиву вы должны сначала инициализировать этот массив. Таким образом, $scope.myHTML = [] должен быть написан перед записью в него значений.

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.

Таким образом, мы должны использовать track by $index для поддержки дубликатов в соответствии с вашими потребностями.

источник

2015-07-20 09:12:54

Во-первых, вы цикл не являешься правильным

// 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>'; 
}

Во-вторых, плункер бросает сообщение об ошибке «Ошибка: ngRepeat: dupes Duplicate Key in Repeater», что означает, что угловой не имеет возможности идентифицировать элементы массива, когда ему необходимо обновить html посредством привязки данных.

Следующий код работает (обратите внимание, что я добавление I в HTML строку, которая означает, что угловые может идентифицировать каждую строку как отдельный):

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>'); 
}

источник

2015-07-20 09:12:11 soaP

Прежде всего, у вас есть ошибки js в вашем коде: $scope.myHTML используется до инициализации. Так что исправьте свой контроллер следующим образом:

.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>'; 
    } 
}]);

Вторая проблема с вашим шаблоном.нг-повторить ошибки, когда найти повторяющиеся значения, поэтому вам нужно добавить track by $index, которые вызывают вопросы, которые будут ключом их позиции в массиве, а не их значения (подробнее читайте here):

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

Plunkr

источник

2015-07-20 09:15:13 RomanHotsiy

AngularJS ng-repeat с ng-bind-html для визуализации строк HTML в массиве?

ответ

Смежные вопросы