如何在ng-repeat中使用$index来添加一个类并显示一个DIV？

Question

9 浏览2023年2月4日

匿名的 2023年2月4日

0 Comments

我有一组

元素。


  
     ABC
  
  
     DEF
  
  
     A{{$index}}

当用户点击上述地址元素中的一个时，它应该设置selected的值并显示下面的一个

元素：

100


101
{{ $index }}

这对于前两种情况是有效的。

然而，对于A0、A1、A2和A3来说，一点都不起作用。

如果您查看这个Plunker，这个问题会更清楚：

请注意，我在顶部添加了{{ selected }}作为调试辅助工具。另外，x in [4,5,6,7]只是用来模拟循环。在实际应用中，我将其写为ng-repeat="answer in modal.data.answers"。

有没有人知道如何设置这样的东西，使得li类current在合适的时候设置，并且A0、A1、A2和A3的li和DIV在合适的时候显示？

0

匿名的 · Answer 1 · 2023-02-15T19:47:13+00:00

原因：

该问题的原因是ng-repeat指令会创建一个新的作用域，因此在ng-repeat内部无法直接使用$index变量。

解决方法：

可以通过在控制器中定义一个函数，通过函数的参数传递$index的值来实现。具体做法如下：

在控制器中定义一个函数setSelected，该函数接受一个参数selected，并将其赋值给$scope.selected变量。

在HTML中，通过ng-class指令和ng-click指令来设置样式和触发点击事件。在ng-click指令中调用setSelected函数，并将$index作为参数传递。

通过ng-show指令来控制div元素的显示与隐藏。根据$scope.selected的值与$index的值进行比较，如果相等则显示该div。

下面是完整的代码示例：

{{ selected }}

  
    ABC
  
  
    DEF
  
  
    A{{$index}}
  


  100


  101


  {{ $index }}

在控制器中添加如下代码：

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

这样就可以通过ng-repeat中的$index变量来设置样式和显示相应的div了。

匿名的 · Answer 2 · 2023-09-05T20:14:04+00:00

问题的原因是ng-repeat创建了它自己的作用域，所以当你使用selected=$index时，它在该作用域中创建了一个新的selected属性，而不是改变现有的属性。要解决这个问题，你有两个选项：

将selected属性更改为非原始类型（即对象或数组，这样JavaScript会查找原型链），然后在该属性上设置一个值：

$scope.selected = {value: 0};
<a ng-click="selected.value = $index">A{{$index}}</a>

或者

使用$parent变量来访问正确的属性。虽然不太推荐，因为它增加了作用域之间的耦合

<a ng-click="$parent.selected = $index">A{{$index}}</a>

这两种方法是解决该问题的两种不同方法。你可以根据个人喜好选择其中一种方法。