Ng-Repeat, wie für das letzte Element ng-show getestet wird

Question

Ich versuche nicht, eine andere Klasse für das letzte Element eines ng-repeats hinzuzufügen.

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?

Answer 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

Answer 2

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>