每行的折叠按钮答案

【问题标题】：Collapse button for each row每行的折叠按钮
【发布时间】：2016-08-20 09:15:47
【问题描述】：

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

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

如您所见，我正在使用 ng-repeat 从 api 获取数据并将其显示在列表项的列表项中有它自己的折叠内容，而不是很多按钮，多亏了任何指南，它们只显示一个折叠的内容。

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

您可以将$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>

【讨论】：

:/即使有一个丢失它也不起作用#我添加了它但它不起作用
ps 谢谢你的回答
jquery.min.js:2 未捕获的错误：语法错误，无法识别的表达式：#mycollapse_$index 我得到了这个
谢谢@DININDU

【解决方案2】：

您需要创建自己的折叠功能。试试这个

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

【讨论】：