2016-05-27 6 views
2

Ich möchte ng-repeat verwenden, um ein div zu wiederholen. Dieses div hat auch einen Knopf darin.AngularJS - Wiederhole ein div und eine Taste

Derzeit mache ich es durch die div und die Schaltfläche in dem Javascript-Teil zu schaffen und das Endergebnis in einem Array drängen:

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

Ich habe 2 Fragen:

1) Was sollte die HTML-Syntax sein? Ist das Folgende korrekt?

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

2) Gibt es eine Möglichkeit, das zu tun, ohne das DOM zu manipulieren?

+0

Warum Sie dies in der Javascript erstellen? –

+0

Ich verwende GoogleChart, und ich brauche die ID des Div, um ein Diagramm zu beeinflussen. Also die einfachste Lösung (zumindest für mich!) War dies in Javascript zu tun. Aber ich versuche das zu ändern. –

Antwort

0

Sie auf die Schaltfläche in der Vorlage haben:

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

By the way, sollten Sie nicht ein Element mit einer statischen id wiederholen.

+0

Ugh, ich glaube, ich habe nicht verstanden, wie ng-repeat tatsächlich funktioniert. Ich werde es versuchen, danke. –

+0

@olivierGrech 'ArrayDiv' sollte ein tatsächliches Array sein, das Informationen enthält, die Sie in Ihrem DIV ... –

0

Eine Möglichkeit besteht darin, ng-bind-html innerhalb ng-repeat zu verwenden.

ng-bind-html wertet den Ausdruck aus und fügt das resultierende HTML sicher in das Element ein.

Sichere Art und Weise ist entweder mit ngSanitize oder Verwendung $sce machen. Demo

Filter Richtlinie für die sichere Bindung:

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

Ausblick:

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

Controller:

$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}); 
Verwandte Themen