Angularを使用して、アコーディオン展開出来るリストを作成しています。
以下の様な静的なリストでは実現できています。
<ons-list-header ng-click="flag = !flag">TITLE</ons-list-header>
<ons-list-item ng-show="flag">item1</ons-list-item>
<ons-list-item ng-show="flag">item2</ons-list-item>
<ons-list-header ng-click="flag2 = !flag2">TITLE</ons-list-header>
<ons-list-item ng-show="flag2">item1</ons-list-item>
<ons-list-item ng-show="flag2">item2</ons-list-item>
これを、ng-repeatで動的に作成しようとすると、上手く行きません。
配列には、[部署、氏名、年齢、性別]が入っています。
配列を繰り返す中で、部署が同一だった場合、部署が乗ったヘッダーを作成し、クリックした際に展開して表示するにはどうしたらいいでしょうか?
<ons-list>
<div ng-repeat="item in items">
<ons-list-header ng-click="flag = !flag" ng-if="items[$index - 1].Busho != item.Busho">{{item.Busho}}</ons-list-header>
<ons-list-item ng-show="flag">{{item.Name}}</ons-list-item>
</div>
</ons-list>
ためしに上記で作成しました。
全て部署名のリストが完成しました。
クリックすると全部展開されるとおもいきや、全く反応しません。
よろしくお願いします。