Kamel Mili Kamel Mili - 7 months ago 22
Javascript Question

Collapse button for each row

Hey everyone i have collapse button in a list-group am trying to show details of each row in collapse the problem is am having the data from a web service so it's dynamic here's my code

<li class="list-group-item" ng-repeat="l in list">

<div class="row">
<div class="col-md-8">

<h5>{{l}} : </h5>
</div>

<div class="col-md-4">
<div class="input-group">
<select class="form-control">
<option value="" selected>Not Passed</option>
<option value="">Passed</option>
<option value="">Ok</option>
<option value="">Ko</option>

</select>

<span class="input-group-btn">
<button class="btn btn-primary form-control" data-toggle="collapse" data-target="mycollapse">
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</span>


</div>
<div id="mycollapse" class="collapse">
<br> add bug zdfsdfd
</div>
</div>
</div>

</li>


as you can see am using ng-repeat to get the data from the api and display it in list-items in the list item i have a combobox and a button what i want when i want to click at that button each item has it's own collapsed content not a lot of buttons who only show one collapsed content thanks to any guide.

Answer

You can use $index with your id because $index is dynamic.

<li class="list-group-item" ng-repeat="l in list">

  <div class="row">
    <div class="col-md-8">

      <h5>{{l}} : </h5>
    </div>

    <div class="col-md-4">
      <div class="input-group">
        <select class="form-control">
          <option value="" selected>Not Passed</option>
          <option value="">Passed</option>
          <option value="">Ok</option>
          <option value="">Ko</option>

        </select>

        <span class="input-group-btn">
          <button class="btn btn-primary form-control" data-toggle="collapse" data-target="#mycollapse_{{$index}}">
          <i class="glyphicon glyphicon-chevron-down"></i>
          </button>
        </span>


      </div>
      <div id="mycollapse_{{$index}}" class="collapse">
        <br> add bug zdfsdfd
      </div>
    </div>
  </div>

</li>