Ng-Repeat、最後のng-show要素のテスト方法

Question

ng-repeatの最後の要素に別のクラスを追加しようとしていません。

私はディスプレイにデータを持っている：

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

は、私は、すなわち、真の含まれたデータの範囲を表示する「XS]→[L」（Mオプションを逃し注）上記のように表示したいです。私が出ている

ベストngのリピートを使用している：

<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> 

偽==サイズXL利用できるので、これは失敗し、サイズXSが使用できない場合、それは動作しません予想通り。

考えていない表示ロジックの順列はありますか？または、要素が最後の（または最初の）の場合は、と表示されているかどうかをテストする「適切な」方法はありますか？

Answer 1

場合filter、その後availableことにより、簡単な$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> 

デモhttps://plnkr.co/edit/QHIKrUOudSYpczWuVdCe?p=previewこれは、角ドキュメントの例のフォーク

Answer 2

これを行うための最善の方法は、それを表示しようとする前に、コントローラに結果を計算することです。これはやっている

$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; 
} 

何$scope.sizes配列内の各アイテムをスキャンしています。最初に利用可能なアイテムが見つかると、その名前をBeginSizeに割り当てます。利用可能なアイテムが表示されるたびに、その名前をEndSizeに割り当てます。最後にループが最後に利用可能な項目に到達し、それを正しくするEndSizeに割り当てるので、私たちはEndSizeでうっすらとすることができます。あなたのHTMLで

、このようにそれを参照：

<span>{{ FormattedSizes }}</span>