Вложенный ng-repeat $parent. $index и $index

У меня странная ошибка, которая, к сожалению, я не могу реплицировать с помощью jsfiddle. Я прокомментировал весь мой код (кроме библиотек и т.д.), За исключением следующих фрагментов. Есть ли что-то очевидное, что я не понимаю? Любые идеи?

Это работает и печатает: (0,0) (0,1) (1,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div>
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

Однако этот фрагмент кода печатает: (0,0) (1,1) (0,0) (1,1)

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$index}} {{$index}})
        </div>
    </div>
</div>

Мой контроллер:

$scope.list  = [1, 2];
$scope.list2 = [1, 2];

Ответ 1

DEMO FIDDLE

Это потому, что директива ng-if создает новую область для себя, когда вы ссылаетесь на $parent, она обращается к непосредственной области $parent, то есть к области внутреннего повторения.

Итак, если вы хотите достичь чего-то, чего хотели, как в первом, вы можете использовать это:

<div ng-repeat="i in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{$parent.$parent.$index}} {{$parent.$index}})
        </div>
    </div>
</div>

если у вас есть несколько внутренних директив, вы можете использовать ng-init для хранения $index в переменной для ссылок в дочерних областях.

<div ng-repeat="i in list" ng-init="outerIndex=$index">
    <div ng-repeat="j in list2" ng-init="innerIndex=$index">
        <div ng-if="1">
            ({{outerIndex}} {{innerIndex}})
        </div>
    </div>
</div>

Я настоятельно рекомендую вам ознакомиться с этой статьей в областях знаний в angular

Ответ 2

Вместо использования ng-init вы можете использовать синтаксис (key, value) ng-repeat для получения родительского индекса.

DEMO

<div ng-repeat="(iKey, i) in list">
    <div ng-repeat="j in list2">
        <div ng-if="1">
            ({{iKey}} {{$index}})
        </div>
    </div>
</div>

Ответ 3

просмотрите PLUNK

ng-if создает новую дочернюю область, из-за которой необходимо добавить $parent. Я создал свойство myname, которое сообщает имя области, с помощью которого вы можете проверить, что именно происходит.

<div ng-if="1">
    ({{$parent.$parent.$index}} {{$parent.$index}})
</div>

Ответ 4

В ng-if вводится другая область видимости, поэтому одного $parent. недостаточно.

Вы можете удвоить его так: $parent.$parent.$index или запомнить индекс внешнего ng-repeat в другой переменной через ng-init следующим образом:

<div ng-repeat="i in list" ng-init="listIndex = $index">
  <div ng-repeat="j in list2">
    <div ng-if="1">
      ({{listIndex}} {{$index}})
    </div>
  </div>
</div>

Пример plunker: http://plnkr.co/edit/dtaBAmkU32BCsLASLs0C?p=preview