[英]Accordion angularjs using bootstrap collapse
On my AngularJS app, I have a component <address>
that use collapse
from bootstrap.在我的 AngularJS 应用程序中,我有一个组件<address>
使用了 bootstrap 的collapse
。 It was working perfectly until I tried to use a dynamic ID for the content to hide.在我尝试使用动态ID隐藏内容之前,它运行良好。
It was required since I'm using two <address>
in the parent component, to avoid ID conflicts.这是必需的,因为我在父组件中使用了两个<address>
以避免ID冲突。
HTML sample : HTML 示例:
<div ng-class="$ctrl.getAddressAccordionClass()">
<h3 data-toggle="collapse" data-target="#$ctrl.addressId" ng-click="$ctrl.toggleAccordion();">
<span>{{$ctrl.boxTitle}}</span>
</h3>
<div ng-attr-id="$ctrl.addressId" class="panel-collapse collapse in">
<p>some content</p>
</div>
</div>
I saw that I can use ng-attr-id
to set a dynamic id.我看到我可以使用ng-attr-id
来设置动态 ID。 But how can I inject my id into data-target
property ?但是如何将我的 id 注入到data-target
属性中?
I asked too early the answer was simple, simply add double curly braces {{ }} :我问得太早了,答案很简单,只需添加双花括号{{ }} :
<div ng-class="$ctrl.getAddressAccordionClass()">
<h3 data-toggle="collapse" data-target="#{{$ctrl.addressId}}" ng- click="$ctrl.toggleAccordion();">
<span>{{$ctrl.boxTitle}}</span>
</h3>
<div ng-attr-id="{{$ctrl.addressId}}" class="panel-collapse collapse in">
<p>some content</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.