Biorąc pod uwagę te dane w moim kontrolera:
$scope.data = [
{id: "1", ElementType: "paragraph", text: "some content"},
{id: "2", ElementType: "listItem", text: "some list item content"},
{id: "3", ElementType: "quote", text: "some quote"}
]
Biorąc pod uwagę ten ng-powtarzaj moim zdaniem:
<div ng-repeat="item in data">{{item.text}}</div>
Jak mogę uczynić ten HTML? :
<p>Some content</p>
<ul>
<li>some list item content</li>
</ul>
<blockquote>some quote</blockquote>
Zbadałem ng-przełącznik, ale utrzymuje rodzic Div. Innymi słowy Chcę zastąpić HTML wyprodukowany przez NG-Repeat z nowym znacznikiem na podstawie atrybutu obiektu.
2 odpowiedzi
Możesz to zrobić w dyrektywie za pomocą funkcji kątowej {X0}}, jak pokazano w To PLNKR.
aktualizacja Oto enkr, który działa lepiej
Oto część kluczowa:
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
var htmlStr = '';
var repeat = attrs.repeat;
for(var i = 0; i< repeat; i++){
htmlStr += html;
}
ele.html(htmlStr);
$compile(ele.contents())(scope);
});
}
Twój kontroler wyglądałby tak:
function MyController($scope) {
$scope.html = '<p>{{id}}</p>\
<ul>\
<li>{{ElementType}}</li>\
</ul>\
<blockquote>{{text}}</blockquote>';
}
Z twojego przykładu usunięcie NG-Repeat całkowicie i wystarczy użyć tej dyrektywy. Jedną zmianą polega na tym, że przejdziesz w całym $ scope.data i dynamicznie wyciągnij kawałki, które chciałeś użyć w ciągach HTML. Ale ponieważ jest to łańcuch, który powinien być łatwy do zrobienia z prostym konkatencją ciągu.
Jedna ostatnia rzecz - prawdopodobnie będziesz musiał umieścić kilka tagów, dzięki czemu można wymienić twoją zawartość statyczną z dynamicznymi danymi z tablicy. Rodzaj jak NG-REPEAT! (ale różne te same).
Wreszcie można użyć interpolate, aby wypełnić ciąg HTML:
$interpolate(template)({
id: id,
ElementType: ElementType,
text: text
});
Gdzie otrzymasz dane dla tych elementów z kontrolera
Wystarczy gniazdo ng-if w <div ng-repeat=...>.
Dla else możesz użyć ng-if z odwróconym stanem