Accordion angularjs с использованием бутстрап-коллапса

Question

В моем приложении AngularJS есть компонент <address>, который использует collapse из начальной загрузки.Он работал отлично, пока я не попытался использовать динамический ID для скрытия содержимого.

Это было необходимо, поскольку я использую два <address> в родительском компоненте, чтобы избежать конфликтов ID .

Пример 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>

Я видел, что могу использовать ng-attr-id для установки динамического идентификатора.Но как я могу ввести свой идентификатор в data-target свойство?

Answer 1

Я спросил слишком рано, ответ был прост, просто добавьте двойные фигурные скобки {{}} :

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