Javascript AngularJS ng repeat和ng bind html在数组中呈现html字符串？

我正在尝试呈现来自HTML字符串数组的HTML字符串，我对AngularJS非常陌生，我试图遵循AngularJS网站上的示例，但似乎我找不到正确的方法来实现这一点

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

HTML

---

首先，你的循环是不正确的

// 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:dups replicate 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>');
}

---

首先，你的循环是不正确的

// 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:dups replicate 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>');
}

HTML文件

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

请参阅“plunker”

解释：

代码的问题是没有定义循环中的变量i。另外，在为数组赋值之前，必须先初始化该数组。因此，在将值写入$scope.myHTML=[]之前，必须先将其写入

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

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

因此，我们必须根据您的需要使用track by$index来支持副本。

HTML文件

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

请参阅“plunker”

解释：

代码的问题是没有定义循环中的变量i。另外，在为数组赋值之前，必须先初始化该数组。因此，在将值写入$scope.myHTML=[]之前，必须先将其写入

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

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

---

因此，我们必须根据您的需要使用track by$index来支持重复项。

首先，您的代码中有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查找重复值时重复错误，因此需要添加track by$index，这将导致项目按其在数组中的位置设置关键帧，而不是按其值更详细地读取：

---

首先，代码中有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查找重复值时重复错误，因此需要添加track by$index，这将导致项目按其在数组中的位置设置关键帧，而不是按其值更详细地读取：