Monacaを利用し、AngularJS+Ionicのハイブリッドアプリを制作しています。
ion-listを用いて、エクスプローラーアプリの様なものを実現したいです。
フォルダを一覧表示し、
フォルダをタップすると次階層のデータを表示する。
データをタップするとデータの詳細情報を表示する。
フォルダの追加やデータの追加は任意で行える。
というものです。
現在躓いているのが、ion-listのng-clickで次階層に潜った後、
フォルダ/データを追加したときに、
ion-listの内容が画面に反映されないくなるという部分です。
1階層目(ng-clickをしていない状態)では正常に追加後、表示されます。
ion-listをng-clickしてion-listを再描写するというのはダメなのでしょうか。。。
明示的にion-listを再描写する方法などあればご教授ください。。
javascript
1//controller.js 次階層表示(最低限の処理のみ記述) 2 3 //次階層に移る 4 $scope.moveDesc = function(index){ 5 6var list = [ 7{"id":"1","oya":"0","kbn":"f","name":"雑誌"}, 8{"id":"2","oya":"1","kbn":"d","name":"オレンジページ"} 9]; 10 11 //選択されたIDをoya持つデータを検索 12 var target = list.filter(function (element) { 13 return element.oya == index; 14 }); 15 16 //ion-listに表示 17 $scope.lists = target; 18 19} 20
javascript
1//controller.js フォルダ追加 2 3//一覧データ 4var list = [ 5{"id":"1","oya":"0","kbn":"f","name":"雑誌"}, 6{"id":"2","oya":"1","kbn":"d","name":"オレンジページ"} 7]; 8 9//フォルダを作成する場合 10var folder = new Object; 11folder['id'] = '3'; 12folder['oya'] = '0'; 13folder['kbn'] = 'f'; 14folder['name'] = 'hoge'; 15 16//既存リストに追加 17list.push(folder); 18 19//ion-listに入れなおす 20$scope.lists = list;
html
1<ion-list id="itemlist"> 2 <ion-item class="item-icon-right" ng-repeat="list in lists" type="item-text-wrap" ng-click="moveDesc({{list.id}})"> 3 <!--フォルダーだったら--> 4 <i ng-show="list.kbn == 'f'" class="material-icons material-folder">folder_open</i> 5 <h2 ng-show="list.kbn == 'f'" class="material-folder-name">{{list.name}}</h2> 6 7 <!--データだったら--> 8 <h2 ng-show="list.kbn == 'd'">{{list.title}}</h2> 9 10 <i class="icon ion-chevron-right icon-accessory"></i> 11 </ion-item> 12</ion-list> 13
あなたの回答
tips
プレビュー