2016-08-08 20 views
3

Ich versuche nicht, eine andere Klasse für das letzte Element eines ng-repeats hinzuzufügen.Ng-Repeat, wie für das letzte Element ng-show getestet wird

Ich habe Daten Display:

$scope.sizes = [{name:XS,available:true},{name:S,available:true},{name:M,available:false},{name:L,available:true},{name:XL,available:false}]; 

ich den Bereich der Daten angezeigt werden sollen, die wahr enthält, das heißt, die oben angezeigt als "XS → L" (man beachte die M-Option fehlt out).

Beste Ich habe kommen mit verwendet ng-repeat:

<span ng-repeat="size in sizes track by $index" 
         ng-init="sizeIndex = $index" 
         ng-show="size.available == true && (sizeIndex == 0 || sizeIndex == (sizes.length -1))"> 
        {{size.short}}<span ng-show="sizeIndex ==0"> → </span> 
       </span> 

Da dies erwartet schlägt fehl, da Größe XL erhältlich == false, und es wird nicht funktionieren, wenn die Größe XS nicht verfügbar ist.

Gibt es eine Vertauschung der Anzeigelogik, an die ich nicht gedacht habe? Oder gibt es einen "richtigen" Weg zu testen, ob ein Element das letzte (oder erste) in einer Liste ist?

+0

wird '$ last' Ihnen helfen mit einem' filter' filtern Sie nicht Zeilen mit ng-show etc. –

Antwort

1

Wenn Sie filter von available dann eine einfache $first n $last

<li class="animate-repeat" ng-repeat="size in sizes | filter: {available:true}"> 
    <div ng-show="$first">{{size.name}}</div> 
    <div ng-show="$last">{{size.name}}</div> 
    </li> 

Demo https://plnkr.co/edit/QHIKrUOudSYpczWuVdCe?p=preview dies eine Gabel des Winkel doc Beispiel arbeiten

+0

Danke für diese Antwort, wirklich einfach. – Tobin

1

Der beste Weg, dies zu tun, ist das Ergebnis in Ihrem Controller zu berechnen, bevor Sie versuchen, um sie anzuzeigen:

$scope.sizes = [ 
    {name: "XS", available: true}, 
    {name: "S", available: true}, 
    {name: "M", available: false}, 
    {name: "L", available: true}, 
    {name: "XL", available: false} 
]; 

DisplayRange(); 

function DisplayRange() { 
    var BeginSize = null, EndSize = null; 
    for (var i=0; i < $scope.sizes.length; i++) { 
     if ($scope.sizes[i].available === true && BeginSize == null) { 
      BeginSize = $scope.sizes[i].name; 
     } 
     if ($scope.sizes[i].available === true) { 
      EndSize = $scope.sizes[i].name; 
     } 
    } 
    $scope.FormattedSizes = BeginSize + " → " + EndSize; 
} 

Was ist in der $scope.sizes Array durch jedes Element Scannen zu tun. Wenn es das erste verfügbare Element findet, weist es diesen Namen BeginSize zu. Jedes Mal, wenn ein verfügbares Element angezeigt wird, weist es diesen Namen zu. Wir können schlampig mit sein, weil schließlich die Schleife das letzte verfügbare Element erreichen und es zuweisen wird, die es richtig machen wird.

in Ihrem HTML Bezugs es wie folgt aus:

<span>{{ FormattedSizes }}</span> 
+0

Vielen Dank. Ich mag deine Antwort, da es eine sehr vielseitige und wunderbar beschriebene Methode gibt. Ich gebe die letzte Antwort als erste Antwort an, weil sie einfacher und für meine Anwendung gut ist. Danke für Ihre Hilfe aber :) – Tobin