ng-repeat 动态变量名

Question

我正在实施 ng-repeat 来为 bootstrap 手风琴界面创建元素。

我有 ng-repeat 工作但是我遇到的问题是我需要动态创建 ID 以便单独定位手风琴元素。

我的 ng-repeat HTML 块引用：

<div class="panel-heading" data-toggle="collapse" data-parent="#products-accordion" href="#collapseOne">

并降低参考文献：

<div id="collapseOne" class="panel-collapse collapse in">

为了使其正常工作，collapseOne 需要是动态的 - collapse1、collapse2 等。如何在 ng-repeat 中迭代值？ "collapse" + i 基本上就是我想要达到的目标。

其次，只有 ng-repeat 列表中的第一项需要此行的 "in" class：

<div id="collapseOne" class="panel-collapse collapse in">

这样可以确保打开第一个项目。

提前感谢您的帮助

Answer 1

您可以使用 ng-repeat 的内置 $index。（此处的文档：https://docs.angularjs.org/api/ng/directive/ngRepeat）

所以它看起来像这样：

<div id="collapse_{{ $index }}" class="panel-collapse collapse in">

这将创建：

<div id="collapse_0" class="panel-collapse collapse in">
<div id="collapse_1" class="panel-collapse collapse in">

等等。

默认情况下打开第一个 div 我想你可以像这样使用 ng-class:

<div id="collapse_{{ $index }}" ng-class="{ in : $index == 0 }" class="panel-collapse collapse">

ng-repeat dynamic variable name