跟踪嵌套的ng-repeat索引

13 浏览
0 Comments

跟踪嵌套的ng-repeat索引

我有一个嵌套的ng-repeat，像这样：\n\n 索引：{{ $index }}\n 删除我\n 内部索引：{{ $index }}\n\n我想能够在$flowIndex中删除索引。然而，如果我有像这样的内容：\n

0
1
2
3

\n并且我删除索引2。如果我继续删除索引3，它将找不到，因为ng-init变量仍然认为它在索引3，但实际上它并不在索引2。\n有人知道解决方法吗？

0

3 答案

0 Comments

问题：keeping track of nested ng-repeat index's的问题出现的原因是什么？

在给定的代码中，ng-repeat指令被嵌套使用，导致在内部循环中无法正确跟踪索引。这是因为ng-repeat指令在内部循环中使用的索引是外部循环的索引，而不是内部循环的索引。因此，无法准确地获取内部循环的索引。

解决方法：keeping track of nested ng-repeat index's问题的解决方法是什么？

为了解决这个问题，可以通过在内部循环中引入一个自定义的变量来跟踪内部循环的索引。这样就可以准确地获取内部循环的索引。

以下是修改后的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angularjs.5.8" data-semver="1.5.8" src="//opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
<body ng-app="myApp">
  <section ng-controller="MyController">
  <div ng-repeat="data in flow">
  
      Index: {{ $index }}
      <div ng-click="flow.splice($index, 1)">Delete me [{{ $index }}]</div>
  
      <div ng-repeat="inside_data in data track by $index">
          Inside index: {{ $index }} : {{ inside_data }}
      </div>
      <hr>
  </div>
</section>
</body>
</html>

在修改后的代码中，我们使用了"data track by $index"来追踪内部循环的索引。这样，我们就可以正确地获取内部循环的索引。

现在，当删除内部循环中的数据时，索引将正确更新，并且删除操作将按预期工作。

0
0 Comments

问题的原因是在嵌套的ng-repeat中无法准确地跟踪索引值。解决方法是使用$parent.$index来获取父级索引。这个方法可以避免变量与当前状态不同步的问题。具体可以参考这个链接的回答。

0
0 Comments

问题的出现原因是在嵌套的`ng-repeat`中，当需要跟踪索引时，使用了错误的变量`$parent.$index`。实际上，在`ng-repeat`中，它会创建一个子作用域，并且`$index`是该作用域的一部分。因此，不需要使用`$flowIndex`，可以使用`$parent.$index`代替。

解决方法是将删除逻辑移动到控制器中，并在控制器中定义一个函数`$scope.delete`，接受一个参数`$index`，然后使用`$scope.flow.splice($index, 1)`来删除指定索引的元素。

在HTML中，使用嵌套的`ng-repeat`来展示数据，并在需要跟踪索引的地方使用`$index`即可。删除按钮的点击事件调用`delete`函数，并传递当前索引作为参数。

以下是修改后的代码示例：


    Index: {{ $index }}
    
Delete me

    

        Inside index: {{ $index }}
    





$scope.delete = function ($index) {
    $scope.flow.splice($index, 1);
};

经过修改后，代码可以正常运行，并且在嵌套的`ng-repeat`中正确地跟踪索引。

0