Come inserire il codice html utilizzando ng-repeat in AngularJS?

Voglio creare una riga di pulsanti in un div utilizzando ng-repeat. E poi fare in modo che quel div sia clonato/duplicato in qualche modo.Come inserire il codice html utilizzando ng-repeat in AngularJS?

Fondamentalmente quindi sarà simile a questo;

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

E mi piacerebbe anche voglio fare il div che che è in duplicato di seguito. Ho usato il clone prima, ma ho bisogno di usare ng-repeat e non è stato altrettanto efficace.

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

Questo è quello che ho per il mio html. Il mio file app.js finora assomiglia a questo.

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>', 
    ] 
});

Primo post per StackOverflow, quindi se non ero chiaro per favore fatemelo sapere! Grazie!

fonte

2016-04-29 Andrew McKeighan

Perché non Template il pulsante all'interno della campata ripetute, e basta inserire gli argomenti dinamici, se necessario? Per esempio. '' –

Perché non sapevo che era una possibilità, ma Funziona! Sono abbastanza nuovo a tutto questo, grazie mille! Come funziona esattamente? –

Non è un problema! Angular è un po 'una bestia per avvolgere la tua testa. Tutto questo fa parte della [interpolazione] di Angular (https://docs.angularjs.org/guide/interpolation). Prende attributi prefissati nella tua vista e li interpreta come Angular [espressioni] (https://docs.angularjs.org/guide/expression). Ciò ti consente di manipolare più angolarmente il testo sulla tua pagina, senza dover inserire la logica nel controller. È più complesso di così, ma c'è solo così tanto che posso scrivere in un commento. Sentiti libero di contattarmi direttamente se desideri maggiori dettagli. (Email di profilo) –

Usa 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>

fonte

2016-04-29 00:22:39

Questa è assolutamente una buona risposta, in particolare se si sta caricando HTML da fonti non attendibili. (Input/parametri utente) Come qualsiasi persona infosec ti dirà, non fidarti mai del cliente. –

sicuro .. usalo con attenzione! ;) –

Come inserire il codice html utilizzando ng-repeat in AngularJS?

risposta

Problemi correlati