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
PierreB 12 sierpień 2014, 21:40

2 odpowiedzi

Najlepsza odpowiedź

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

1
Caspar Harmer 13 sierpień 2014, 17:40

Wystarczy gniazdo ng-if w <div ng-repeat=...>.

Dla else możesz użyć ng-if z odwróconym stanem

1
k0ner 12 sierpień 2014, 17:50