angularjs – ng-repeat动态变量名称

2023年7月28日 293次阅读

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

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

我的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中迭代值？ “崩溃”我基本上是我想要实现的目标.

其次,只有ng-repeat列表中的第一项需要此行中的“in”类：

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

这可确保打开第一个项目.

在此先感谢您的帮助

最佳答案 你可以使用ng-repeats内置的$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">
点赞