AngularJS'de ng-repeat kullanarak html kodunu nasıl ekleyebilirim?

ng-repeat kullanarak div içinde bir dizi düğme oluşturmak istiyorum. Ve sonra bu div bir şekilde klonlanmış/çoğaltılmış var.AngularJS'de ng-repeat kullanarak html kodunu nasıl ekleyebilirim?

Temel olarak böyle bir şeye benzeyecek;

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

Ve ayrıca aşağıda çoğaltılamaz olduğunu div yapmak isterdim. Daha önce klon kullandım ama ng-repeat kullanmam gerekiyor ve bu da başarılı değildi.

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

Bu benim html'm için sahip olduğum şey. Benim app.js dosyası şu ana kadar böyle görünüyor.

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

StackOverflow'a ilk gönderim, eğer açık değilse bile lütfen bana bildirin! Teşekkürler!

kaynak

2016-04-29 Andrew McKeighan

Neden tekrarlanan yayılma alanının içerisinde bulunan düğmeye şablon değil ve gerektiğinde sadece dinamik argümanlardır eklemek? Örneğin. '' –

Bunun bir olasılık olduğunu bilmiyordum ama işe yarıyor! Tüm bunlara oldukça yeniim, çok teşekkür ederim! Tam olarak nasıl çalışır? –

Sorun değil! Açısal başınızı saracak bir canavar. Bu, Angular'ın [interpolasyon] 'unun bir parçasıdır (https://docs.angularjs.org/guide/interpolation). Öntanımlı öznitelikler sizin bakış açınızdan alır ve bunları Açısal [ifadeler] olarak yorumlar (https://docs.angularjs.org/guide/expression). Bu, mantığınızı denetleyicinize koymanıza gerek kalmadan, sayfanızdaki metinden daha fazlasını, açısal olarak değiştirmenize olanak tanır. Bundan daha karmaşık, ama bir yorumda yazabileceğim sadece çok şey var. Daha fazla ayrıntı istiyorsanız, doğrudan benimle iletişime geçmekten çekinmeyin. (E-posta adresindedir) –

Kullanım 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>

kaynak

2016-04-29 00:22:39

Bu özellikle, güvenilmeyen kaynaklardan HTML yüklüyorsanız harika bir yanıttır. (Kullanıcı girişi/parametreleri) Herhangi bir infosec kişi size söyleyeceğinden, müşteriye asla güvenmeyin. –

emin .. dikkatli kullanın! ;) –

AngularJS'de ng-repeat kullanarak html kodunu nasıl ekleyebilirim?

cevap

İlgili konular