手風琴 angularjs 使用引導折疊

Question

在我的 AngularJS 應用程序中，我有一個組件<address>使用了 bootstrap 的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來設置動態 ID。 但是如何將我的 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>