吳重複，如何測試最後ng顯示元素

Question

我不想爲ng重複的最後一個元素添加一個不同的類。

我有數據要顯示：

$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提供== false，並且如果大小XS是不可用的，它不會工作。

是否有我沒有想到的顯示邏輯的排列組合？或者是否有一種「適當」的方式來測試一個元素是否在列表中顯示爲的最後（或第一個）？

Answer 1

如果filter通過available那麼簡單$firstň$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角DOC例子的叉

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>