Wählen Sie eine Direktive basierend auf den Daten aus.

Question

Ich versuche eine Tabelle basierend auf einem Array von Objekten zu füllen. Dieses Array enthält keine Objekte des gleichen Typs und für jede Zeile möchte ich einen komplett anderen Stil und, onclick-Funktion, grundsätzlich ein völlig anderes Verhalten. Zum Beispiel

var data=[ 
    { 
    type:'dir-b', 
    data: { ... } 
    }, 
    { 
    type:'dir-b', 
    data: { ... } 
    }, 
    { 
    type:'dir-c', 
    data: { ... } 
    } 
] 

Für Objekttyp dirB ich eine Vorlage und Controller wollen und für DIRC eine ganz andere Funktion und Vorlage.

Die Lösung, die ich fand, war 3 Direktiven zu erstellen. Eine davon wird ausgeführt, um eine der anderen zwei hinzuzufügenden Anweisungen basierend auf Daten zu bestimmen.

.directive("dirA", function($compile){ 
    return{ 
    restrict:'A', 
    priority:1000, 
    terminal:true, 
    link: function(scope, element, attribute){ 
     element.removeAttr("dir-a");//prevent endless loop 
     element.attr(attribute.type,""); 
     $compile(element)(scope); 
    } 
    } 
}) 
.directive("dirB", function($compile){ 
    return{ 
    restrict:'A', 
    replace:true, 
    link: function(scope, element, attribute){ 
     console.log("dirA"); 
    } 
    } 
}) 
.directive("dirC", function($compile){ 
    return{ 
    restrict:'A', 
    replace:true, 
    link: function(scope, element, attribute){ 
     console.log("dirC"); 
    } 
    } 
}); 

Die Verwendung von <tr dir-a type='{{d.type}}' ng-repeat='d in data'/> hat nicht den gewünschten Effekt. Entweder gebe ich dirA eine Priorität von 0 und es kann das Attribut analysieren, aber es wird öfter als die Array-Größe wiederholt, oder ich gebe ihm eine Priorität von 1000 und es kann den b.type nicht analysieren und als Literal verwenden. Hat jemand eine Lösung dafür?

Answer 1

Nicht sicher, das war die beste Lösung, aber es war die Lösung, die ich fand.

<table> 
    <tbody ng-repeat='d in data'> 
    <tr ng-if='d.type=="dir-b"' dir-b></tr> 
    <tr ng-if='d.type=="dir-c"' dir-c></tr> 
    </tbody> 
</table> 

Auf diese Weise aufgrund ng-wenn nur die richtige Zeile immer angezeigt wird, aber das Problem ist, dass tbody so viele Zeilen wiederholt wird, wie es in Daten ist. Aber bis es eine bessere Lösung gibt, habe ich es so gemacht.

Answer 2

Sie könnten hier möglicherweise einen ngSwitch verwenden.

Plnkr

HTML

<div ng-repeat="(key, d) in data track by $index"> 
    <div class="tbody" ng-switch on="d.type"> 
    <div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div> 
    <div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div> 
    </div> 
</div> 

Dann definieren Sie nur dirB und dirC Richtlinien.

Dies wird nicht als eine HTML-Tabelle angezeigt, können Sie hoffentlich von diesem obwohl arbeiten?