AngularJS ng-repeat 与 ng-bind-html 在数组中呈现 HTML 字符串？答案

【问题标题】：AngularJS ng-repeat with ng-bind-html to render strings of HTML in an array?AngularJS ng-repeat 与 ng-bind-html 在数组中呈现 HTML 字符串？
【发布时间】：2015-07-20 09:02:54
【问题描述】：

我正在尝试渲染来自 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

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat ng-bind-html

【解决方案1】：

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 = []必须在写入值之前写入。

另外ng-repeat 不允许数组中有重复项。这是因为当有重复时，不可能维护一个集合项和 DOM 元素之间的一对一映射。

如果您确实需要重复重复的项目，您可以替换使用track by 表达式与您自己的默认跟踪行为。

所以我们必须根据您的需要使用track by $index 来支持重复。

【讨论】：

【解决方案2】：

首先你的代码中有 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

【讨论】：

【解决方案3】：

首先你的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”错误，这意味着当需要通过数据绑定更新html时，angular无法识别数组的元素。

以下代码有效（请注意，我在 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>');
}

【讨论】：