Angular UI Bootstrap:使用ng-repeat開啟第一個手風琴


問題:

我在使用Angular UI Bootstrap版本0.1.2的手風琴指令。在示例頁面上,有一個範例顯示如何默認開啟第一個手風琴組:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

這對於靜態內容來說工作得很好,但是對於使用ng-repeat生成的動態內容來說,它無法如預期地操作。換句話說,它不能這樣工作:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="true"
>
</accordion-group>

我的解決方案:

在模板中,將手風琴的is-open屬性綁定如下:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="status.isItemOpen[$index]"
>
</accordion-group>

並在控制器中:

$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
  isItemOpen: new Array($scope.groups.length),
  isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true

如果你希望第一個手風琴默認為關閉,則將最後一行的值改為false

如果這個解決方案對你沒有作用,請讓我知道。😊