ng-repeat 动态变量名 [英] ng-repeat dynamic variable name

问题描述

我正在实施 ng-repeat 来为引导手风琴界面创建元素.

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

我的 ng-repeat HTML 块引用:

并降低参考:

为了使其正常工作，collapseOne 需要是动态的——collapse1、collapse2 等.如何在 ng-repeat 中迭代值?"collapse" + i 基本上就是我想要实现的.

其次，只有 ng-repeat 列表中的第一项需要这一行的in"类:

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

提前感谢您的帮助

解决方案

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

所以它看起来像这样:

哪个会创建:

<div id="collapse_1" class="panel-collapse 折叠在">

等等.

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

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

I am implementing ng-repeat to create elements for a bootstrap accordion interface.

I have ng-repeat working however the issue I have is that I need to dynamically create the ID in order to target the accordion element individually.

My ng-repeat HTML block references:

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

And lower down references:

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

For this to work correctly, collapseOne needs to be dynamic - collapse1, collapse2 etc. How is it possible to iterate values in ng-repeat? "collapse" + i basically is what Im trying to achieve.

Secondly, only the first item in the ng-repeat list requires the "in" class on this line:

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

This ensures the first item is opened.

Thanks in advance for your help

解决方案

You could use ng-repeats built-in $index. (Documentation here: https://docs.angularjs.org/api/ng/directive/ngRepeat)

So it would look like this:

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

Which would create:

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

Etcetera.

For opening the first div by default I think you can use ng-class like this:

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

这篇关于ng-repeat 动态变量名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！