javascript - 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}];

我想显示包含 true 的数据范围，即将上面显示为“XS → L”(注意遗漏了 M 选项)。

我想到的最好的方法是使用 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>

正如预期的那样，这失败了，因为可用尺寸 XL == false，如果尺寸 XS 不可用，它将不起作用。

有没有我没有想到的显示逻辑排列？或者是否有一种“正确”的方法来测试元素是否是列表中显示的最后一个(或第一个)？

Answer 1

如果您按可用过滤，那么一个简单的$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这是 Angular 文档示例的一个分支