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

ダイナミックIDは、ngRepeatディレクティブによって公開される暗黙の$ indexプロパティを使用して作成できます。ネストされたngRepeatを処理するために、ngInitディレクティブを使用して$ indexプロパティをエイリアスすることもできます。これにより、どの$ indexプロパティがどこで参照されているかがわかります。私が利用可能を使用しています両方のngRepeatsため

考える

...

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

... IDが一意であることを確認するために、$ index値（明快/可読性のためにエイリアス）。

注記：プロパティ名は小文字で始まるのが一般的です。質問と回答の一貫性を保つために、命名規則をそのまま維持しています。