AngularJS - ngRepeat mit mehreren Objekttypen

Ich habe eine Liste von Elementen. Ein Element kann eine Reihe von Dinge, die, sagen wir, die Liste ist so etwas wie so :

[userObject , vehicleObject , userObject , animalObject , animalObject]

Jetzt will ich das Rendern der Liste mit der ngRepeat-Direktive, verwenden Sie eine Vorlage nach der Art des Objekts (Polymorph-rendering). kann das getan werden?

vielleicht so etwas wie (ng-Einsatz ist ein hypothetisch - Richtlinie):

<ul>
    <li ng-repeat="item in items">
       <img ng-use="item.type == 'user'" ng-src="item.src">
       <a ng-use="item.type == 'vehicle'">{{item.link}}</a>
       <span ng-use="item.type == 'animal'">{{item.name}}</span>
    </li>
</ul>
InformationsquelleAutor Shlomi Schwartz | 2013-01-20
  1. 31
    <ul>
    <li ng-repeat="item in items" ng-switch="item.type">
       <img ng-switch-when="user" ng-src="item.src">
       <a ng-switch-when="vehicle">{{item.link}}</a>
       <span ng-switch-when="animal">{{item.name}}</span>
    </li>
</ul>

    API Referenz:

    http://docs.angularjs.org/api/ng.directive:ngSwitch

    • Super cool ... nur das fehlende wissen, die ich brauchte, danke!
    • eine Sache noch ... können Sie merge-Fällen, d.h. so etwas wie ng-switch-when="'user'||'Tier'"?
    • Nein das kannst du nicht tun. Btw, bei der Verwendung von ng-switch-when sollten Sie nicht verwenden extra '' (im Gegensatz zu meiner ersten Antwort), und eckigen Griffen die Attributwerte als strings. hier ist der zugehörige Quellcode: github.com/angular/angular.js/blob/master/src/ng/directive/...
    • Vielen Dank dafür, sehr der Ausarbeitung
    • Diese stützt sich auf das item-Objekt mit einem Feld "Typ"... was ist, wenn Ihr Objekt nicht haben, dass?
    InformationsquelleAutor Umur Kontacı
  2. 0

    Obwohl diese nicht mit ng-switch, es tut sich Runde das problem der nicht mit einem Typ Feld, das @DotNetHaggis hingewiesen.

    <div ng-repeat="field in fields">
    <div ng-if="field.user !== undefined">user info</div>
    <div ng-if="field.vehicle !== undefined">vehicle info</div>
    <div ng-if="field.animal !== undefined">animal info</div>
</div>
    InformationsquelleAutor deejbee
Schreibe einen Kommentar