如何动态引用元素的动态生成ID？附AngularJS代码示例

嘿，我看你现在的代码里所有折叠按钮都指向同一个#div1，这肯定会导致不管点哪个面板，都会触发同一个折叠区域对吧？别担心，我们只需要给每个循环生成的面板配上唯一的动态ID就能解决这个问题，步骤很简单：

具体修改步骤 #

• 第一步：利用循环索引或对象唯一属性生成动态ID
  AngularJS的ng-repeat自带了$index变量，它代表当前循环项的索引（从0开始），我们可以用它来生成唯一ID。如果你的tda对象本身有唯一标识（比如idTipoDato这类字段），用它会比$index更可靠，因为索引会随着数据顺序变化而改变，而对象的唯一ID是固定的。

• 第二步：同步修改折叠按钮的href和内容区域的id
  把原来固定的href="#div1"改成动态绑定的格式，同时给每个折叠内容区域加上对应的id，确保按钮和内容区域一一对应。

修改后的完整代码 #

<div class="col-lg-12" data-ng-repeat="tda in allTipoDatosAlimentos">
  <div class="box dark">
    <header>
      <div class="icons"><i class="icon-edit"></i></div>
      <h5>
        <!-- 用$index生成动态href -->
        <a class="accordion-toggle minimize-box" data-toggle="collapse" href="#div-{{$index}}">
          {{tda.nombreTipoDato}}
        </a>
      </h5>
      <div class="toolbar">
        <ul class="nav">
          <li>
            <!-- 这里的href也要同步修改 -->
            <a class="accordion-toggle minimize-box" data-toggle="collapse" href="#div-{{$index}}">
              &...
            </a>
          </li>
        </ul>
      </div>
    </header>
    <!-- 折叠内容区域，设置对应的动态id -->
    <div id="div-{{$index}}" class="collapse in">
      <div class="body">
        <!-- 这里放该面板的具体内容，比如tda的其他属性 -->
        示例内容：{{tda.descripcion}}
      </div>
    </div>
  </div>
</div>

额外提示 #

如果你的tda对象有唯一ID字段（比如idTipoDato），建议替换成这种写法，稳定性更好：

<!-- 按钮的href -->
href="#div-{{tda.idTipoDato}}"
<!-- 内容区域的id -->
id="div-{{tda.idTipoDato}}"

这样每个折叠面板就只会控制自己对应的内容区域啦！

内容的提问来源于stack exchange，提问作者Alberto