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

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

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

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

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

Q&A

解決済

1回答

581閲覧

ons-lazy-repeatで素早いスクロールの際の処理について、わからないことがあります。

huckepain

総合スコア14

AngularJS

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

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

0グッド

0クリップ

投稿2017/10/25 11:53

Onsen UI(V2.6.1) + AngularJS でMonacaで作成しております。
下記のようにlazy-repeatを使用してリストを作成した際、
実機で素早くスクロールした際に、AngularJSのタグの{{hello.items[index].id}}が表示されてしまうことがあります。
※常にではなく、リフレッシュ(?)がかかると元の値にもどります。
実機は、android端末でしか試していませんが複数端末では発生しております。

こういう状態になるのは仕様なのでしょうか?
回避策はあるのでしょうか?

index.html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 ons.bootstrap() 19 .controller('HelloController', function() { 20 this.world = 'World'; 21 22 this.items = []; 23 self = this; 24 for (var i = 0; i < 300; i++) { 25 var item = { 26 id:i 27 }; 28 this.items.push(item); 29 } 30 31 32 self.inspectionListDelegate = { 33 configureItemScope: function(index, itemScope) { 34 itemScope.index = index; 35 }, 36 countItems: function() { 37 return self.items.length; 38 } 39 }; 40 41 }); 42 ons.ready(function() { 43 44 console.log("Onsen UI is ready!"); 45 46 }); 47 </script> 48</head> 49<body> 50 <ons-page ng-controller="HelloController as hello"> 51 <ons-toolbar> 52 <div class="center">Introduction</div> 53 </ons-toolbar> 54 55 <ons-list> 56 <ons-list-item ons-lazy-repeat="hello.inspectionListDelegate"> 57 <ons-col> 58 <div id="inspection_list">{{hello.items[index].id}}</div> 59 </ons-col> 60 </ons-list-item> 61 </ons-list> 62 </ons-page> 63</body> 64</html> 65

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

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

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

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

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

guest

回答1

0

ベストアンサー

ng-bindを使えば問題ないはずですよ。
自分のコードですけど、

【JavaScript(delegate)】
itemScope.customerName = custList[index].customerName;

【HTML】

<div ng-bind="customerName"></div>

投稿2017/10/26 01:13

fe.ktym

総合スコア17

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

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

huckepain

2017/10/26 01:40

fe.ktymさん 回答ありがとうございます。 確認なのですが、回答内容通りに修正した結果、 上から下にスクロールした際には問題ないようですが、 下から上へのスクロールした際には、データが出力されず、白い状態が発生します。 画面の更新が間に合ってないからでしょうか?
fe.ktym

2017/10/26 01:46

そうだと思います。 ng-bindしている変数に値がセットされるまでは何も表示されません。 数千件のデータ積んだりすると、上から下でも素早くスクロールさせると、何も表示されないず一呼吸おいてから表示されます。 逆に{{変数}}表記すると、値がセットされるまでの間、{{変数}}が表示されてしまうと。
huckepain

2017/10/26 01:49

ご回答ありがとうございます。 とすると、この状態を回避するには、スクロールスピードを制御させるしかないってことでしょうか?
fe.ktym

2017/10/26 01:54

ということになりますけど、データを大量に積んで、いじの悪い操作(弾くような早いスクロール)させなければ発生しないので、実用上は問題ないなと思って、私は特に制御はしていません。 もし、実用上の問題があるのであれば、マシンパワーとか、データの作成とか、他の部分がネックになっているのかもしれませんね。
huckepain

2017/10/26 01:56

ご回答ありがとうございます。 どう回避するかは別途検討します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問