質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

479閲覧

AngularJS+Ionic ion-listを再描写したい

giwagiwagiwa

総合スコア34

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/09/19 02:40

編集2019/09/19 12:13

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問