Question

嘿大家我在列表组中有折叠按钮我试图显示崩溃中每行的详细信息问题是我从网络服务获取数据所以它在这里是动态的我的代码< / p>

<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获取数据并将其显示在列表项的列表项中我有一个组合框和一个按钮当我想点击该按钮时我想要的每个项目拥有它自己的折叠内容而不是很多按钮，只有任何指南才显示一个折叠的内容。

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

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

每行的折叠按钮

2 个答案: