AngularJS ng-repeat with ng-bind-html 以在数组中呈现 HTML 的字符串？

Question

我正在尝试呈现来自 HTML 字符串数组的 HTML 字符串，我对 AngularJS 很陌生，我尝试按照AngularJs 网站，但我似乎想不出一个合适的方法来做到这一点。

这里是我的plunker为了更好的理解，我希望我自己解释一下，如果不是只是要求更多的澄清。非常感谢您的帮助。

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>

控制器

(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

Answer 1

首先你的for循环不正确

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

其次，plunker 抛出一个“错误：ngRepeat:dupes Duplicate Key in Repeater”错误，这意味着 angular 在需要通过数据绑定更新 html 时无法识别数组的元素。

以下代码有效（请注意，我在 html 字符串中附加了 i ，这意味着 angular 可以将每个字符串标识为单独的）：

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

Answer 2

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"

解释:

你的代码的问题是循环中的变量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 来支持重复项。

Answer 3

首先你的代码中有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>';
  }
}]);

第二个问题与您的模板有关。 ng-repeat 找到重复值时会出错，所以你需要添加 track by $index 这将导致项目根据它们在数组中的位置而不是它们的值来键入（更详细阅读 here）：

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

Plunkr

AngularJS ng-repeat with ng-bind-html 以在数组中呈现 HTML 的字符串？

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

html

javascript

angularjs

angularjs-ng-repeat

ng-bind-html