最初のボタンだけがドロップダウンメニューで展開されます

Question

私は最近、javascript/angularとhtmlを取り上げ始めました。私はテーブルを作っています。テーブル内にドロップダウンメニューを追加して、より大きな説明に展開します。私はテーブルを追加し、テーブルを作成するために "ng-repeat"を使用しました。折りたたんで展開できるボタンも追加しましたが、いずれかのボタンをクリックすると、最初のボタンだけが展開されます。だから、2番目、3番目などをクリックしても、最初のドロップダウンだけが開きます。

対応するボタンで正しい説明が展開されるようにするにはどうすればよいですか？私はそれが意図したように動作していない "ng-repeat"であるかどうかはわかりません。私はそれがボタンのIDと関係があるかもしれないと思う。正しいボタンが正しい説明を開くように、それぞれに一意のidを与える方法、またはそれを完全に取り除く方法はありますか？ここで

は、コードは次のとおりです。

  <table> 
      <thead> 
       <tr> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Gender</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="employee in employees| filter:searchText" > 
        <td>{{employee.Name}}</td> 
        <td>{{employee.Last}}</td> 
        <td> 
         <div class="FAQ"> 
          <a href="#hide1" class="hide" id="hide1">+</a> 
          <a href="#show1" class="show" id="show1">-</a> 
          <div class="question"> {{employee.Gender}} </div> 
          <div class="list"> 
           <p>THIS IS A DESCRIPTION </p> 
           <p>MORE DESCRIPTION</p> 
          </div> 
         </div> 

        </td> 
       </tr> 
      </tbody> 
     </table> 

これは、CSSスタイルシートです：

/*stuff for button press description*/ 
.FAQ { 
    vertical-align: top; 
    height:auto !important; 
} 
.list { 
    display:none; 
    height:auto; 
    margin:0; 
    float: left; 
} 
.show { 
    display: none; 
} 
.hide:target + .show { 
    display: inline; 
} 
.hide:target { 
    display: none; 
} 
.hide:target ~ .list { 
    display:inline; 
} 
.hide, .show { 
    width: 20px; 
    height: 20px; 
    border-radius: 20px; 
    font-size: 10px; 
    color: #fff; 
    text-shadow: 0 1px 0 #666; 
    text-align: center; 
    text-decoration: none; 
    box-shadow: 1px 1px 2px #000; 
    background: #cccbbb; 
    opacity: .95; 
    margin-right: 0; 
    float: left; 
    margin-bottom: 25px; 
} 

.hide:hover, .show:hover { 
    color: #eee; 
    text-shadow: 0 0 1px #666; 
    text-decoration: none; 
    box-shadow: 0 0 4px #222 inset; 
    opacity: 1; 
    margin-bottom: 25px; 
} 

.list p{ 
    height:auto; 
    margin:0; 
} 
.question { 
    float: left; 
    height: auto; 
    width: 90%; 
    line-height: 20px; 
    padding-left: 20px; 
    margin-bottom: 25px; 
    font-size: 200%; 
} 

button.btn.collapsed:before 
{ 
    content:'+' ; 
    display:block; 
    width:15px; 
} 
button.btn:before 
{ 
    content:'-' ; 
    display:block; 
    width:15px; 
} 

Answer 1

あなたはあなたが使用することができ、あなたのリピートブロック内で$index変数へのアクセス権を持っている必要がありますng-repeat使用しますコード内に特定のIDを割り当てます。したがって、id='hide-{{$index}}を設定することができます。

あなたがすることができるもう一つは、あなたのモデルに関連するブール値を切り替えると同じで、複数のdivを作成している

ng-click='employee.ShowDetails = !employee.ShowDetails' 

Answer 2

NGリピータでトグルする

ng-show='employee.ShowDetails' 

を行うことですあなたのCSSがターゲットとするURIには差異はありません。あなたのhrefがクリックされると、CSSのパターン：

.hide:target ~ .list { 
    display:inline; 
} 

...がURIの前にある "list"クラスでターゲティングされています。リピーターによって出力されたDOM内のdivと同じくらい一致します。これは、URIがすべての繰り返し要素にわたって同一であるため、最初のものが使用されるためです。リピータで

は実行します。ターゲット〜.LIST構文：あなたは（気紛れ）.hideを維持できるようにしながら、URIとそのIDの自己参照を変更します

<a href="#hide{{$index}}" class="hide" id="hide{{$index}}">+</a> 
<a href="#show{{$index}}" class="show" id="show{{$index}}">-</a> 

。