Wie füge ich HTML-Code mit ng-repeat in AngularJS ein?

Ich möchte eine Reihe von Schaltflächen in einem Div mit ng-Wiederholung erstellen. Und dann muss dieses div auf irgendeine Weise geklont/dupliziert werden.Wie füge ich HTML-Code mit ng-repeat in AngularJS ein?

Im Grunde wird es so aussehen;

[0] [0] [0] [0]

Und ich würde will auch die div machen, dass in unten dupliziert ist. Ich habe vorher geklont, aber ich brauche ng-repeat und das war nicht so erfolgreich.

<body ng-app="myApp" ng-controller="myCtrl"> 
... 
... 
... 
<div id="boxHolder"> 
<span id="musicBox" ng-repeat="x in instrumentBtns"> 
{{x}} 
</span> 
</div>

Das ist, was ich für meine html habe. Meine app.js-Datei sieht so aus.

var app = angular.module("myApp", []); 

app.controller("myCtrl", function($scope) { 
    $scope.instrumentBtns = [ 
    '<button id="inst0">0</button>', 
    '<button id="inst1">0</button>', 
    '<button id="inst2">0</button>', 
    '<button id="inst3">0</button>', 
    ] 
});

Erste Post zu StackOverflow, also wenn ich nicht klar war, lass es mich wissen! Vielen Dank!

Quelle

2016-04-29 Andrew McKeighan

Warum Vorlage nicht auf die Schaltfläche innerhalb der wiederholten Spanne, und legen Sie einfach die dynamischen Argumente wie nötig? Z.B. ' 0' –

Weil ich nicht wusste, dass das eine Möglichkeit war, aber Es klappt! Ich bin ziemlich neu bei all dem, vielen Dank! Wie genau funktioniert es? –

Kein Problem! Angular ist ein bisschen wie ein Biest, um den Kopf herumzulegen. Dies ist alles Teil von Angulars [Interpolation] (https://docs.angularjs.org/guide/interpolation). Sie verwendet Präfixattribute in Ihrer Sicht und interpretiert sie als Angular [Ausdrücke] (https://docs.angularjs.org/guide/expression). Dies ermöglicht es Ihnen, mehr als nur den Text auf Ihrer Seite mit eckigen zu manipulieren, während Sie die Logik nicht in Ihren Controller einfügen müssen. Es ist komplexer als das, aber es gibt nur so viel, was ich in einem Kommentar schreiben kann. Fühlen Sie sich frei, mich direkt zu kontaktieren, wenn Sie mehr Details wünschen. (E-Mail-Adresse im Profil) –

Verwenden ngSanitize

angular.module('sanitizeExample', ['ngSanitize']) 
      .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) { 
    $scope.htmlTrusted = function(html) { 
    return $sce.trustAsHtml(html); 
    } 
}]); 

<span id="musicBox" ng-repeat="x in instrumentBtns"> 
    <div ng-bind-html="htmlTrusted(x)"></div> 
</span>

Quelle

2016-04-29 00:22:39

Dies ist eine großartige Antwort, besonders wenn Sie HTML von nicht vertrauenswürdigen Quellen laden. (Benutzereingaben/Parameter) Wie jeder Infosec Ihnen sagen wird, trauen Sie niemals dem Kunden. –

sicher .. benutze es vorsichtig! ;) –

Wie füge ich HTML-Code mit ng-repeat in AngularJS ein?

Antwort

Verwandte Themen