嵌套的ng-repeat，显示错误的$索引

i tried working with ng-repeat but got stucked when $index keeps showing the wrong thing here is my code http://codepen.io/netwrkx/pen/VamRjo

我尝试过使用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');
                }

}

trying to loop through

要遍历

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

孩子美元范围。项=[“橙色”,“芒果”,“葡萄”,“苹果”、“菠萝”,“柠檬”);

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

父母美元范围。DataAPI =[[“橙色”、“芒果”],[“葡萄”,“苹果”],[“菠萝”,“柠檬”]];

$index keeps showing only orange and mango. what am i missing??

$index只显示橘子和芒果。我错过什么呢? ?

ANY IDEA...

任何想法…

4 个解决方案

#1

This will label the items 0, 1, 2, 3, 4, 5.

这将标记项目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>

#2

The inner ng-repeat creates a new scope in which the inner $index is populated and so somehow "shadows" the outer $index.

内部的ng-repeat创建了一个新的范围，其中内部$index被填充，因此某种程度上“阴影”外部$index。

One solution would be to access the parent $index using the following notation:

一种解决办法是使用以下符号访问父$索引:

{{$parent.$index}}

Generally referencing a parent scope's data is bad practice, especially when you define several nested controllers. In this case, I think it is okay. Probably there is also another way to redefine the variable used for the index...

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

#3

here i am not sure what you are trying to do.

在这里我不知道你想做什么。

in view you are using ng-repeat="items in DataAPI" but you already have $scope.items in controller.so in inner loop you cant access controllers $scope.items because inner loop already has items from outer ng-repeat.

在视图中，您正在使用ng-repeat=“DataAPI中的项”，但是您已经有了$scope。在控制器。所以在内环中，你不能访问控制器$scope。项目，因为内部循环已经有来自外部ng-repeat的项目。

so make sure what you want in inner loop.you want items from controller scope or items from outer loop scope?

确保你想要的是内循环。您想要来自控制器范围的项还是来自外部循环范围的项?

#4

If you have the freedom to modify the $scope.DataAPI, then try modifying it in a json format, as illustrated below:

如果您有修改$作用域的*。然后尝试以json格式修改它，如下所示:

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

Then access the data accordingly.

然后相应地访问数据。

#1