[英]Bootstrap collapse in Angular js
I have a problem with using bootstrap collapse ui with angularJs. 我在使用angularJs引导折叠ui时遇到问题。 When I click on arrow button, it's collapsing all items(divs) instead of one.
当我单击箭头按钮时,它折叠了所有项目(格)而不是一个。 Could any body help me please how can I define selected item(div) to be collapsed instead of all?
任何机构都可以帮助我,如何定义要折叠而不是全部折叠的选定项目(div)? Here's my code.Thanks.
这是我的代码。谢谢。
<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>
Its because isCollapsed
is the only basis that your collapsible have. 这是因为
isCollapsed
是可折叠的唯一基础。 Add isCollapsed
as a property in your item
. 将
isCollapsed
添加为item
的属性。 and then use item.isCollapsed
for the collapse toggle. 然后使用
item.isCollapsed
进行合拢切换。
You are using the same variable for each item. 您为每个项目使用相同的变量。
To solve your problem, you can: 要解决您的问题,您可以:
isCollapse
in the item
variable but you have to update your model to store a context variable isCollapse
存储在item
变量中,但是您必须更新模型以存储上下文变量 array
of N elements and you handle each state in this array array
,然后处理该数组中的每个状态
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.