Accordion angularjs using bootstrap collapse

Question

On my AngularJS app, I have a component <address> that use collapse from bootstrap. It was working perfectly until I tried to use a dynamic ID for the content to hide.

It was required since I'm using two <address> in the parent component, to avoid ID conflicts.

HTML sample :

<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. But how can I inject my id into data-target property ?

Logan Wlv · Accepted Answer · 2019-04-25 12:47:05Z

1

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>

answered Apr 25, 2019 at 12:47

Logan Wlv

3,8147 gold badges37 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accordion angularjs using bootstrap collapse

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related