AngularJS - divとボタンを繰り返す

Question

divを繰り返すにはng-repeatを使います。このdivにもボタンがあります。 ）

1：私は2つの質問がある

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

：

現在、私はdiv要素とJavaScript部分でボタンを作成し、配列の最終結果を押すことで、それをやっています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

可能な方法の1つは、を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});