Angular JS中多級手風琴的動態div ID

Question

我是AngularJS的新手。 我在我的應用程序中有一個2級的手風琴。

<div class="box-group" id="accordion" ng-repeat="item in tourList"> 
    <div class="panel box box-primary"> 
    <div class="box-header with-border"> 
    <h4 class="box-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed"> 
    {{item.Name}} 
    </a> 
    </h4> 
         </div> 
         <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> 
          <div class="box-body"> 
           <div class="box-group" id="accordion1" ng-repeat="itinerary in item.Itineraries"> 
            <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it --> 
            <div class="panel box box-primary"> 
             <div class="box-header with-border"> 
              <h4 class="box-title"> 
               <a data-toggle="collapse" data-parent="#accordion1" href="#collapseItin" aria-expanded="false" class="collapsed"> 
                {{itinerary.Name}} 
               </a> 
              </h4> 
             </div> 

我想爲手風琴div創建動態ID並將其分配給父手風琴。

任何幫助！

Answer 1

您可以通過使用ngRepeat指令公開的隱式$ index屬性來創建動態ID。爲了處理嵌套的ngRepeat，你也可以通過ngInit指令爲$ index屬性設置別名。這使得清楚哪個$ index屬性被引用在哪裏。

鑑於...

angular.module('app', []) 

.controller('ctrl', 
    function($scope) { 

    $scope.tourList = [{ 
     Name: "Tour 1", 
     Itineraries: [{ 
     Name: "tour 1 itin 1", 
     Stops: ["A","B"] 
     }, { 
     Name: "tour 1 itin 2", 
     Stops: ["C","D"] 
     }] 
    }, { 
     Name: "Tour 2", 
     Itineraries: [{ 
     Name: "tour 2 itin 1", 
     Stops: ["E","F"] 
     }, { 
     Name: "tour 2 itin 2", 
     Stops: ["G","H"] 
     }] 
    }] 
    } 
); 

...以下嵌套手風琴正常工作......

<div class="box-group" id="tourAccordion_{{tourIndex}}" ng-repeat="item in tourList" ng-init="tourIndex=$index"> 
<div class="panel box box-primary"> 
    <div class="box-header with-border"> 
    <h4 class="box-title"> 
     <a data-toggle="collapse" data-parent="#tourAccordion_{{tourIndex}}" href="#collapse_{{tourIndex}}" aria-expanded="false" class="collapsed">{{item.Name}}</a> 
    </h4> 
    </div> 
    <div id="collapse_{{tourIndex}}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> 
    <div class="box-body"> 
     <div class="box-group" id="itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" ng-repeat="itinerary in item.Itineraries" ng-init="itineraryIndex=$index"> 
     <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it --> 
     <div class="panel box box-primary"> 
      <div class="box-header with-border"> 
      <h4 class="box-title"> 
       <a data-toggle="collapse" data-parent="#itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" href="#collapseItin_{{tourIndex}}_{{itineraryIndex}}" aria-expanded="false" class="collapsed">{{itinerary.Name}}</a> 
      </h4> 
      </div> 
      <ul id="collapseItin_{{tourIndex}}_{{itineraryIndex}}" class="panel-collapse collapse"> 
      <li ng-repeat="stop in itinerary.Stops">{{stop}}</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

https://plnkr.co/edit/XQUq63

...兩個ngRepeats我使用的可用$索引值（別名爲了清晰/可讀性），以確保這些ID是唯一的。

注意：通常約定屬性名稱應以小寫字母開頭。爲了問題和答案之間的一致性，我保留了命名約定。