Question

在AngularJS 1.6.3中，基本上可以嵌套ng-repeat。

我已经确定，在两个嵌套的ng-repeat中，$ parent。$ index等于$ index。

给出以下代码：

<div ng-repeat="category in :: $ctrl.categories">
  <span id="category-{{ $index }}">
    {{ :: category.name }}
  </span>

  <ul>
   <li ng-repeat="data in :: category.links"
       id="link-{{ $parent.$index }}-{{ $index }}">
     {{ :: data.name }}
   </li>
  </ul>
</div>

期望的结果ID为LI：

<div>
  <span id="category-0">CatA</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-0-1">[..]</li>
    <li id="link-0-2">[..]</li>
  </ul>
</div>

<div>
  <span id="category-1">CatB</span>

  <ul>
    <li id="link-1-0">[..]</li>
    <li id="link-1-1">[..]</li>
  </ul>
</div>

LI的实际>实际结果ID：

<div>
  <span id="category-0">CatA</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-1-1">[..]</li>
    <li id="link-2-2">[..]</li>
  </ul>
</div>

<div>
  <span id="category-1">CatB</span>

  <ul>
    <li id="link-0-0">[..]</li>
    <li id="link-1-1">[..]</li>
  </ul>
</div>

有人可以确认这种行为吗？或者我错过了什么？

Answer 1

按预期工作。

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  var $ctrl = this;
  
  $ctrl.categories = [
    {
      name: 'cat1', 
      links: [{name: 'l1'}, {name: 'l2'}, {name: 'l3'}]
    },
    {
      name: 'cat2',
      links: [{name: 'l4'}, {name: 'l5'}]
    }
  ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app='test' ng-controller='Test as $ctrl'>
  <div ng-repeat="category in :: $ctrl.categories">
    <span id="category-{{ $index }}">
      {{ :: category.name }}
    </span>

    <ul>
     <li ng-repeat="data in :: category.links"
         id="link-{{ $parent.$index }}-{{ $index }}">
       {{ :: data.name }}
     </li>
    </ul>
  </div>
</div>

您的子图层周围可能有一些范围生成元素，例如ng-if，ng-repeat，ng-switch。在这种情况下，您需要添加更多$parent

层

为什么$ parent。$ index等于$ index？

1 个答案: