Ng-Repeat，如何测试最后一个 ng-show 元素答案

【问题标题】：Ng-Repeat, how to test for last ng-show elementNg-Repeat，如何测试最后一个 ng-show 元素
【发布时间】：2016-12-14 14:29:09
【问题描述】：

我不想为 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 不可用，它将无法工作。

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

【问题讨论】：

将 $last 帮助您处理 filter 不要使用 ng-show 等过滤您的行

标签： javascript angularjs ionic-framework ng-repeat ng-show

【解决方案1】：

最好的方法是在尝试显示之前在控制器中计算结果：

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

【讨论】：

非常感谢。我喜欢您的回答，因为它提供了一种非常通用且描述精美的方法。我将 $first||$last 答案作为“已回答”，因为它更简单且适合我的应用程序。不过感谢您的帮助:)

【解决方案2】：

如果你 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>

demo https://plnkr.co/edit/QHIKrUOudSYpczWuVdCe?p=preview 这是 Angular 文档示例的一个分支

【讨论】：

感谢您的回答，真的很简单。