Angular ng-repeat $index 在 mozilla firefox 上的 ng-if 指令中不起作用

Question

我正在使用 ng-repeat 来显示数组中的项目。对于每个项目，我检查 $index 是否满足条件。

在 chrome 甚至 Internet Explorer 中，这都能完美无缺地运行。但是，在 Mozilla 中，似乎仅在 ng-repeat 结束后才更新 $index。因此，条件在很多时候都不起作用。这种情况的一个例子是：

<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="img.first == true">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>

针对Lorenzo的回答，我也试过了

<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index == 0">
    <img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
<div class="item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index > 0">
    <img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>

我快要发疯了...请帮忙

Answer 1

ng-if 创建一个 子范围 。

要访问 $index，您需要使用 $parent.$index 访问 ng-if 的父范围（因此 ng-repeat 的范围）

Answer 2

在同一个元素上使用 ng-repeat 和 ng-if 不是一个好主意。两者都创建自己的范围，因此不建议这样做。

一般来说，尽可能避免在同一元素上结合使用其他指令和 ng-repeat 是个好主意。您应该使用 ng-repeat 元素创建一个子元素，并将其他指令放在该子元素上。

Angular ng-repeat $index 在 mozilla firefox 上的 ng-if 指令中不起作用

Angular ng-repeat $index doesn't work in ng-if directive on mozilla firefox

javascript

angularjs

angularjs-ng-repeat

angular-ng-if