每行的折叠按钮

Collapse button for each row

本文关键字：按钮 折叠      更新时间：2023-09-26

大家好，我在列表组中有折叠按钮，我试图在折叠中显示每一行的详细信息，问题是我有来自 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>

如您所见，我使用 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>

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

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

相关文章：