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');
                }

}

尝试循环播放

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

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

$index仅显示橙色和芒果。我错过了什么？

任何想法......

Answer 1

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

内部ng-repeat创建了一个新的范围，其中填充了内部$index，因此不知何故＆＃34;阴影＆＃34;外$index。

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

{{$parent.$index}}

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

Answer 3

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

在视图中您正在使用ng-repeat="items in DataAPI"但是在内部循环中的controller.so中已经有$scope.items您无法访问控制器$scope.items，因为内部循环已经从外部items ng-repeat。

所以确保在内循环中你想要什么。你想要来自控制器范围的项目还是来自外循环范围的项目？

Answer 4

如果您可以自由修改$scope.DataAPI，请尝试以json格式修改它，如下所示：

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

然后相应地访问数据。

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

4 个答案: