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

【问题标题】：Angular ng-repeat $index doesn't work in ng-if directive on mozilla firefoxAngular ng-repeat $index 在 mozilla firefox 上的 ng-if 指令中不起作用
【发布时间】：2016-02-10 10:54:21
【问题描述】：

我正在使用 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>

针对洛伦佐的回答，我也试过了

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

我快要疯了……请帮忙

【问题讨论】：

@lkechi 我已经为它创建了plunker，它似乎在 Mozilla 中运行良好，你能告诉我你使用的是哪个版本的 Mozilla 和 Angular 吗？

标签： javascript angularjs angularjs-ng-repeat angular-ng-if

【解决方案1】：

ng-if 创建一个子作用域。

要访问$index，你需要使用$parent.$index来访问ng-if的父作用域（所以ng-repeat的作用域）

【讨论】：

【解决方案2】：

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

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

【讨论】：

非常感谢。这可行：D ...我将因此更新我的应用程序。