winsticknova winsticknova - 5 months ago 19
AngularJS Question

html and AngularJS drop down menu

I just recently started picking up javascript/angular and html and I am making a table, and I want to add drop down menus within the table that expand to bigger descriptions. I added a table and I used "ng-repeat" in order to populate the table. I also added my button which can collapse and expand, but when I click on any of the buttons, only the first button expands. So even if I click the 2nd, 3rd, etc. it only opens the first drop down.

How can I make it so the corresponding button expands the correct description? I'm not sure if it's the "ng-repeat" that is making it not work as intended. I think it might have to do with the id of the buttons. So is there a way to give each one a unique id, or to get rid of it altogether so that the correct button opens the correct description?

Here is the code:

<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>


this is the css stylesheet:

/*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

When you use ng-repeat you should have access to an $index variable within your repeat block that you can use to assign specific id's within the code. So you can set your id='hide-{{$index}}.

Another thing you can do is to toggle a boolean associated with your model and do a

ng-show='employee.ShowDetails'

that is toggled with a

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