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=""
ng-repeat="group in groups"
is-open="true"
>
</accordion-group>
我的解決方案:
在模板中,將手風琴的is-open
屬性綁定如下:
<accordion-group
heading=""
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
。
如果這個解決方案對你沒有作用,請讓我知道。😊