AngularJS用ng-bind-html重复呈现数组中的HTML字符串？

我想呈现来自HTML字符串数组的HTML字符串，我对AngularJS颇为陌生，我试图遵循AngularJs网站的示例，但似乎我无法弄清楚正确的方法要做到这一点。AngularJS用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>

控制器

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

请参阅猛击

“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来支持重复按照您的需要。

来源

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

其次plunker抛出一个“错误：ngRepeat：愚蠢重复键在转发器”错误，这意味着角度无法识别数组元素时，它需要通过数据绑定更新html。

下面的代码工作（注意，我在我附加在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>'; 
    } 
}]);

第二个问题是您的模板。NG-重复错误时，发现重复的值，所以你需要添加track by $index这将导致项目由他们的阵列，而不是其价值在位置键控（更详细的阅读here）：

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

Plunkr

来源

2015-07-20 09:15:13 RomanHotsiy

AngularJS用ng-bind-html重复呈现数组中的HTML字符串？

回答

相关问题