如何避免重复的id与ng重复+引导崩溃

How to avoid repeated ids with ng-repeat + bootstrap collapse

本文关键字：重复 崩溃 ng 何避免 id      更新时间：2023-09-26

我构建了嵌套的Bootstrap .collapse和ng-repeat。它们有三个级别：dists、admins和agents。

为了使引导折叠工作，您需要为每个.collapse提供不同的id。所以我在id的中添加了一个$index + 1

  <div id="dists" class="list-container">
    <div class="dist" ng-repeat="dist in dists track by $index">
      <a href="javascript:;" data-toggle="collapse" data-target="#admins-{{$index + 1}}" ng-click="updatePanels()">
      </a>
      <div id="admins-{{$index + 1}}" class="list-container collapse">
        <div class="admin" ng-repeat="admin in dist.admins track by $index">
          <a href="javascript:;" data-toggle="collapse" data-target="#agents-{{$index + 1}}" ng-click="updatePanels()">
          </a>
          <div id="agents-{{$index + 1}}" class="list-container collapse">
            <div class="agent" ng-repeat="agent in admin.agents track by $index">
          </div>
        </div>
      </div>
    </div>
  </div>

它起作用了——除了我最终得到了重复的id：

.dist
  #admin-1 <- repeated
    #agent-1
    #agent-2
.dist
  #admin-1 <- repeated

避免这种情况的最简单方法是什么？

对于内部循环，您可以通过$parent.$index访问外部$index。例如

<div id="admins-{{$parent.$index + 1}}-{{$index + 1}}"

对于第三级（代理），使用$parent.$parent.$index访问dist索引。

请参阅https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent

另一种可能更简洁的选择是通过ng-init将索引分配给本地范围的属性。例如

<div class="dist" ng-repeat="dist in dists track by $index"
    ng-init="distIndex = $index + 1">
    <div id="admins-{{distIndex}}">
        <div class="admin" ng-repeat="admin in dist.admins track by $index"
            ng-init="adminIndex = $index + 1">
            <!-- and so on -->
相关文章：