2016-08-08 23 views
1

Ich habe eine Liste von Objekten, die alle die gleichen Felder außer seinem Typ haben. Ich würde gerne einen Untertitel im ng-repeat zeigen, bevor diese Art von Item gerendert wird. Im Moment habe ich x ng-Wiederholungen für x Arten von Gegenständen und es wird unhandlich. Die Blöcke sind alle gleich, mit Ausnahme des Untertitels. Nehmen Sie an, dass das Bereichs-Array keine verstreuten Typen aufweist, sondern mit seinem Typ. Zum Beispiel, wenn ich gerendert würde ich das gerne zeigen.ng-Repeat Show Untertitel für die erste Art von Artikel

Rendered

Cats 
cat 1 
cat 2 
cat 3 

Dogs 
dog 1 
dog 2 
dog 3 

Lizards 
lizard 1 
lizard 2 
lizard 3 

Modell

$scope.animals = [ 
    { name: "cat 1", type: "cat" }, 
    { name: "cat 2", type: "cat" }, 
    { name: "cat 3", type: "cat" }, 
    { name: "dog 1", type: "dog" }, 
    { name: "dog 2", type: "dog" }, 
    { name: "dog 3", type: "dog" }, 
    { name: "lizard 1", type: "lizard" }, 
    { name: "lizard 2", type: "lizard" }, 
    { name: "lizard 3", type: "lizard" } 
]; 

Ansicht

<div ng-repeat="animal in animals"> 
    <!-- if first animal type appearing show subtitle --> 
    {{animal.name}} 
</div> 

Ich will nicht meine strukturieren Daten auf diese Weise, die ich gerade mache und redundante ng-Wiederholungen render.

Modell

$scope.cats = [ 
... 
]; 
$scope.dogs = [ 
... 
]; 
$scope.lizards = [ 
... 
]; 

Ansicht

<h2>Cats</h2> 
<div ng-repeat="cat in cats"> 
    {{cat.name}} 
</div> 

<h2>Dogs</h2> 
<div ng-repeat="dog in dogs"> 
    <h2>Dogs</h2> 
    {{dog.name}} 
</div> 

<h2>Lizards</h2> 
<div ng-repeat="lizard in lizards"> 
    {{lizard.name}} 
</div> 

Vielen Dank im Voraus!

Antwort

2

Sie müssen prüfen, ob sich der Typ vom vorherigen Typ unterscheidet. Sie können diesen Artikel erhalten $index - 1

<div ng-repeat="animal in animals"> 
     <h1 ng-if="animal.type != animals[$index - 1].type"> 
     {{ animal.type }} 
     </h1> 
     {{animal.name}} 
    </div> 
+0

Danke Mann! Das ist so eine einfache Lösung. – tothefux

+1

@osi, ich habe bemerkt, dass du etwas in deiner Antwort vergessen hast, also habe ich mir erlaubt, es zu "reparieren". – developer033

1

Versuchen Sie es mit dem vorherigen Element Ihrer ng-repeat Schleife zuzugreifen und seine Art auf die Art des aktuellen Elements zu vergleichen. Wenn der Typ anders ist, müssen Sie Ihren Untertitel zeigen.

Siehe question für Informationen, wie Sie das vorherige Element erhalten.