Question

我想用ng-repeat重复一个div。这个div里面还有一个按钮。

目前，我是通过在javascript部分创建div和按钮并将最终结果推送到数组中来实现的：

var newDiv = document.createElement('div');
var newButton = document.createElement('button');
newDiv.appendChild(newButton);
$scope.arrayDiv.push(newDiv);

我有两个问题：

1）html语法应该是什么？以下是否正确？

<div id='main_chart_div' ng-repeat="x in arrayDiv" value={{x}}></div>

2）有没有办法在不操纵DOM的情况下做到这一点？

Answer 1

您可以在模板中使用该按钮：

<div id='main_chart_div' ng-repeat="x in arrayDiv" value={{x}}>
 <button></button>
</div>

顺便说一下，你不应该用静态id重复一个元素。

Answer 2

一种可能的方法是在ng-bind-html中使用ng-repeat。

ng-bind-html评估表达式并以安全的方式将生成的HTML插入到元素中。

安全方式是使用ngSanitize或使用$sce。 Demo

安全绑定的过滤器指令：

app.filter('safeHtml', function ($sce) {
   return function (val) {
       return $sce.trustAsHtml(val);
   };
});

查看：

<div id='main_chart_div' ng-repeat="x in arrayDiv">
    <p ng-bind-html="x.html | safeHtml"></p>
</div>

控制器：

$scope.arrayDiv = [{html: '<h1>Heading</h1>'}];

var newDiv = document.createElement('div');
var newButton = document.createElement('button');
newButton.innerHTML = "Button";
newDiv.appendChild(newButton);

$scope.arrayDiv.push({html : newDiv.outerHTML});

AngularJS - 重复div和按钮

2 个答案: