ng-repeatを使用すると重複する要素ID

Question

複数の折りたたみ可能なリスト（カテゴリ&のサブカテゴリなど）を表示するウェブサイトを作成していますが、これまでng-repeatを使用して動的divを作成していましたが、崩壊。 2番目のカテゴリでは、リストを表示/非表示に切り替えるときに、代わりに最初のdivのリストをトグルします。

HTML：

<div class="col-lg-9 col-sm-3 col-xs-12"> 
     <div ng-repeat="cat in categories"> 
      <div class="row"> 
       <div class="col-lg-2 col-sm-3 col-xs-3"> 
        <img src="http://placehold.it/75x75" class="img-circle center-block img-responsive" height="75" width="75"> 
       </div> 
      <div class="col-lg-9 col-xs-8"> 
       <b> 
        {{cat}} 
       </b> 
      </div> 
     </div> 
     <hr> 

     <div class="row" ng-repeat="item in items "> 
      <div class="col-lg-12 col-xs-12"> 
       <p ng-click="toggleCollapse($index + 1)"><i class="fa fa-fw fa-arrow-circle-right"></i> 
        {{item}} 
       </p> 
       <div id="collapse{{ $index + 1}}" class="collapse collapse-checklist"> 
        <div ng-repeat="c in checklist"> 
         <p>Lorem Ipsum</p> 
        </div> 

はJavaScript：

$scope.toggleCollapse = function (ind) { 
    var collapseInd = ("#collapse" + ind); 
    $(collapseInd).collapse('toggle'); 
}; 

さて、私は問題はリピートngをしていることを確認した原因と同じID（崩壊私は）とdiv要素を作成します関数は2番目のdivの代わりに最初のdivのリストを切り替えます。

私の関数は最初のの猫のdivでうまく動作しますが、他のすべてのdivでは最初のdivのリストを切り替えます。誰も私の機能を修正して、それぞれの部門のリストを切り替えることができますか？

Answer 1

チューダーgergelyによって示唆されるように。

使用角度アプローチ。

<p ng-click="showChecklist = !showChecklist"><i class="fa fa-fw fa-arrow-circle-right"></i> 
         {{item}} 
        </p> 
       <div ng-show="showChecklist"> 
        <div ng-repeat="c in checklist"> 
         <p>Lorem Ipsum</p> 
        </div> 

ありがとうございます！

Answer 2

次のようにしてください：次のdiv要素でcollapseを呼び出すことでIDを使用しないようにできます。

<tr ng-repeat="(key, value) in data"> 
    <td> {{key}} </td> <td> {{ value }} </td> 
</tr> 

だから、今あなたがkeyは、すべて時に変更されることが表示されます：あなたはng-repeatを使用して、いくつかの重複したIDを持っている場合、あなたはおそらく、このようにそれを使用する必要があり、コード

$scope.toggleCollapse = function (ind) { 
    $(this).next('div.collapse.collapse-checklist').collapse('toggle'); 
}; 

Answer 3

の下を参照してください。そしてカスタムIDを作る。

<tr ng-repeat="(key, value) in data"> 
    <td id="myCustomId_{{key}}"> {{key}} </td> 
    <td> {{ value }} </td> 
</tr> 

あなたは一意のIDを取得します。

この方法は、ドキュメントに記載されている：http://docs.angularjs.org/api/ng.directive:ngRepeat