Javascript 每行的折叠按钮

嘿，每个人，我有一个列表组中的折叠按钮，我试图显示折叠中每一行的详细信息问题是我有来自web服务的数据，所以它是动态的，这是我的代码

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

{{l}}：
未通过
通过
好啊
让开

添加错误ZDFSD

---

正如您所见，我使用ng repeat从api获取数据并在列表项中的列表项中显示数据，我有一个组合框和一个按钮，当我想点击该按钮时，我想要的是什么，每个项目都有自己的折叠内容，而不是许多按钮，由于任何指南，这些按钮只显示一个折叠的内容

您可以将

$index

与

id

一起使用，因为

$index

是动态的

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

{{l}}：
未通过
通过
好啊
让开

添加错误ZDFSD

您需要创建自己的折叠函数。试试这个

<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" ng-click="collapse[$index]=!collapse[$index]">
          awdawd
          <i class="glyphicon glyphicon-chevron-down"></i>
      </button>
    </span>


        </div>
        <div ng-show="collapse[$index] == true">
            <br> add bug zdfsdfd
        </div>
    </div>
</div>

{{l}}：
未通过
通过
好啊
让开
奥德

添加错误ZDFSD

---

：/即使缺少一个，它也不起作用#我添加了它，但它不起作用。谢谢你的回答jquery.min.js:2未捕获错误：语法错误，无法识别的表达式：#mycollapse $index我收到了这个感谢你@dindu