Javascript AngularJS-重复一个div和一个按钮

我想用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的情况下执行此操作？

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

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

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

---

顺便说一句，您不应该使用静态

id

重复元素。一种可能的方法是在

ng repeat

中使用

ng bind html

ng bind html计算表达式并以安全的方式将结果html插入元素

安全的方法是使用

ngSanitize

或使用

$sce

安全绑定的筛选器指令：

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

$scope.arrayDiv=[{html:'Heading'}]；
var newDiv=document.createElement（'div'）；
var newButton=document.createElement（'button'）；
newButton.innerHTML=“按钮”；
newDiv.appendChild（newButton）；
$scope.arrayDiv.push（{html:newDiv.outerHTML}）；

呃，我想我不明白ng repeat实际上是如何工作的。我会试试的，谢谢。@olivierGrech

arrayDiv

应该是一个实际的数组，包含你想在你的div中呈现的信息。你为什么要在javascript中创建这个呢？我使用的是谷歌图表，我需要div的id来影响图表。所以最简单的解决方案（至少对我来说！）就是用javascript实现。但我正试图改变这一点。