0

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>

ためしに上記で作成しました。
全て部署名のリストが完成しました。
クリックすると全部展開されるとおもいきや、全く反応しません。

よろしくお願いします。

2 件の回答 2

0

ng-repeatごとにscopeが生成されるため、ng-clickflagへの代入はそれぞれのscopeのプロパティとして処理されるようです。

Ng-click doesn't work inside ng-repeat

ちなみに、下記のコードを実行すると、各行単位でflagが動作していることがわかります。

<ons-list>
    <div ng-repeat="item in items">
        <ons-list-header ng-click="flag = !flag">{{item.Busho}} {{flag}}</ons-list-header>
        <ons-list-item ng-show="flag">{{item.Name}}</ons-list-item>
    </div>
</ons-list>

次に、掲載したコードのような形でons-list内でdivタグを使用すると、Onsen UICSSの関係で表示に問題を抱える場合があります。

データが部署ごとに並んでいることが前提で、コントローラ内でons-list-header,ons-list-itemを生成すれば、ng-repeatCSSの問題を解決することができます。

HTML

<ons-list id="list">
</ons-list>

JavaScript

$scope.items = [    // データ
    { Busho: "A部署", Name: "Aさん", Old: 28, Sex: "男性" },
    { Busho: "A部署", Name: "Bさん", Old: 56, Sex: "男性" },
    { Busho: "A部署", Name: "Cさん", Old: 24, Sex: "女性" },
    { Busho: "B部署", Name: "Dさん", Old: 32, Sex: "女性" },
    { Busho: "B部署", Name: "Eさん", Old: 44, Sex: "男性" }
];
$scope.flag = [];   // 部署フラグ

var bushoId = 0;        // 部署ID
var bushoName = "";     // 部署名
var elem = document.getElementById("list");
for (var i = 0; i < $scope.items.length; i++) {
    // 部署が一致しない場合
    if (bushoName != $scope.items[i].Busho) {
        // 部署フラグ設定
        $scope.flag.push(false);
        // 部署ID取得
        bushoId = $scope.flag.length - 1;
        // 部署名取得
        bushoName = $scope.items[i].Busho;
        // ons-list-header追加
        var header = document.createElement("ons-list-header");
        header.setAttribute("ng-click", "flag[" + bushoId + "] = !flag[" + bushoId + "]");
        header.innerHTML = bushoName;
        elem.appendChild(header);
    }
    // ons-list-item追加
    var item = document.createElement("ons-list-item");
    item.setAttribute("ng-if", "flag[" + bushoId + "]");
    item.innerHTML = $scope.items[i].Name;
    elem.appendChild(item);
}
ons.compile(elem);
1
  • scopeの仕組みから解説して頂いてありがとうございます。やはり一筋縄ではいかないようですね・・・はじめに回答して頂いた方のサンプルと共に実装に挑戦してみようと思います。ありがとうございました。
    – user19733
    Commented 2017年1月21日 11:39
0

そのままの配列を使用して作成しようとすると難しくなりそうです。
一度配列を以下のように表示しやすく変換してみると良いかもしれません。

以下のような配列があるとして、部署名をキーとして抜き出した新しい配列を作成する。

$scope.items = [
  {Busho: "A部署", Name: "Aさん", Old: 28, Sex: "男性"},
  {Busho: "A部署", Name: "Bさん", Old: 56, Sex: "男性"},
  {Busho: "A部署", Name: "Cさん", Old: 24, Sex: "女性"},
  {Busho: "B部署", Name: "Dさん", Old: 32, Sex: "女性"},
  {Busho: "B部署", Name: "Eさん", Old: 44, Sex: "男性"},
]

// 変換処理(本題からは逸れるため変換処理は記載しません。)
$scope.bushoArray = convertBushoArray($scope.items);

// 変換後の配列
//  $scope.bushoArray = [
//    {key: "A部署", array: [
//      {Busho: "A部署", Name: "Aさん", Old: 28, Sex: "男性"},
//      {Busho: "A部署", Name: "Bさん", Old: 56, Sex: "男性"},
//      {Busho: "A部署", Name: "Cさん", Old: 24, Sex: "女性"},
//    ]},
//    {key: "B部署", array: [
//      {Busho: "B部署", Name: "Dさん", Old: 32, Sex: "女性"},
//      {Busho: "B部署", Name: "Eさん", Old: 44, Sex: "男性"},
//    ]},
//  ]

htmlは以下のような感じでしょうか。
動作確認しておりませんので、そのままでは動かないかもしれませんが参考になれば。

<ons-list>
  <div ng-repeat="bushoItem in bushoArray">
    <ons-list-header ng-click="bushoItem.show = !bushoItem.show" >{{bushoItem.key}}</ons-list-header>
      <ons-list-item ng-show="bushoItem.show" ng-repeat="item in bushoItem.array">{{item.Name}}</ons-list-item>
  </div>
</ons-list>

補足:
変換処理はfilterとして作成すればもっと見やすくなると思います。
filterの作成方法についても本題とは異なるため記載しませんが、必要あれば別の質問としてあげてください。

1
  • やはりそのままの状態では処理が難しくなってしまうんですね。例を参考に一旦分解して再度配列を作りなおしてみます。ありがとうございました。
    – user19733
    Commented 2017年1月21日 11:36

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。