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-repeat
s 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屋!
查看全文