嵌套 ng-repeat 显示错误的 $index

Question

我尝试使用 ng-repeat 但是当 $index 一直显示错误的东西时卡住了这是我的代码 http://codepen.io/netwrkx/pen/VamRjo

<div ng-controller="ctrl">
    <div class="row responsive-sm " ng-repeat="items in DataAPI">
        <div class="card1" ng-repeat="item in items">
            <div class="row">
                <div class="">            
                    <input type="submit" ng-click="showFullPost($index)"></input>
                    <h4 class="post-title">{{item}} {{$index}}</h4>
               </div>
            </div>
        </div>
    </div>
</div>

function ctrl($scope){
    $scope.items = ["orange", "mango", "grape", "apple", "pineapple", "lemon"];

    $scope.DataAPI =  [["orange", "mango"],["grape", "apple"], [ "pineapple", "lemon"]];

    $scope.showFullPost = function(index){
                    console.log($scope.items[index] );
                    //$state.go('post');
                }

}

正在尝试循环

child $scope.items = ["orange", "mango", "grape", "apple", "pineapple", "lemon"];

parent $scope.DataAPI = [["orange", "mango"],["grape", "apple"], [ "pineapple", "lemon"]];

$index 一直只显示橙子和芒果。我错过了什么？？

任何想法...

Answer 1

内部 ng-repeat 创建了一个新的作用域，其中填充了内部 $index，因此不知何故 "shadows" 外部 $index。

一种解决方案是使用以下表示法访问父 $index：

{{$parent.$index}}

通常引用父作用域的数据是不好的做法，尤其是当您定义多个嵌套控制器时。在这种情况下，我认为是可以的。可能还有另一种方法可以重新定义用于索引的变量...

Answer 2

这里我不确定你要做什么。

鉴于您正在使用 ng-repeat="items in DataAPI" 但您在 controller.so 中已经有 $scope.items 在内部循环中您无法访问控制器 $scope.items 因为内部循环已经有 items 来自外部 ng-repeat.

所以请确定你想要在内部 loop.you 想要来自控制器范围的项目还是来自外部循环范围的项目？

Answer 3

这将标记项目 0、1、2、3、4、5。

<div ng-repeat="items in DataAPI track by $index">
  <div ng-repeat="item in items" ng-init="idx = $parent.$index * items.length + $index">
    <button ng-click="showFullPost(idx)">View Full</button>
    <h4 class="post-title">{{item}} {{idx}}</h4>
  </div>
</div>

Answer 4

如果你有修改$scope.DataAPI的自由，那么尝试修改成json格式，如下图：

$scope.DataAPI = [{"name": "orange"}, {"name": "mango"}, {"name": "grape"}, {"name": "apple"}, {"name": "pineapple"}, {"name": "lemon"}];

然后相应地访问数据。

嵌套 ng-repeat 显示错误的 $index

nested ng-repeat showing wrong $index

javascript

nested-loops

angularjs

angularjs-ng-repeat

ionic-framework