Question

我在使用带有angularJs的bootstrap collapse ui时遇到问题。当我点击箭头按钮时，它会折叠所有项目（div）而不是一个。任何身体可以帮助我，我如何定义要折叠的所选项目（div）而不是全部？这是我的代码。谢谢。

  <div class="panel">
      <div class="panel-header">
        <div class="panel-header-info">
          <div class="items_list" *ngFor="let item of items">
            <div class="items_arrow_button" (click)="isCollapsed = !isCollapsed">
              <div class="img">
                <img src="./assets/images/img.png" class="img-responsive">
              </div>
              <span> Test data {{data.data}}</span>
              <i class="fa" [ngClass]="{'fa-angle-down': isCollapsed, 'fa-angle-up': !isCollapsed}"></i>
            </div>
            <div class="items_list" [collapse]="isCollapsed">
              <ul>
                <li>
                  <h2>First item</h2>
                  <span>{{data.item}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

因为isCollapsed是您可折叠的唯一依据。在isCollapsed中添加item作为媒体资源。然后使用item.isCollapsed进行折叠切换。

Answer 2

您对每个项目使用相同的变量。

要解决您的问题，您可以：

将变量isCollapse存储在item变量中，但您必须更新模型以存储上下文变量
创建N个元素的array并处理此数组中的每个状态
使用指令/组件折叠哪个句柄是自己的状态

Angular js

2 个答案: