1

データベースへの問い合わせ結果をグローバル変数"CustomerList"に格納し、その内容を"ons-list"の"ons-razy-repeat"で表示するコードを記述しました。
あるボタンを押したときに、データベースの再問合わせを行い、グローバル変数"CustomerList"の中身を丸ごと変更し、それに合わせて"ons-list"の表示内容を変更したく思います。単純に"CustomerList"の中身を変更すると、おかしな表示(表示に時間がかかったり
、リストの高さが長くなったり)になってしまいます。

CustomerListが更新されたときに、一度、リセットをかけなければならないのではないかと思うのですが、マニュアルからはよくわかりませんでした。
どのように処理すれば良いのでしょうか?

var CustomerList=["a","b","c","d","e","f","g","h"];

    ons.bootstrap()
    .controller('MyCtrl', ['$scope', function($scope) {
       $scope.MyDelegate = {
          configureItemScope: function(index, itemScope) {
             itemScope.item = {
                name: 'Item #' + (CustomerList[index])
             };
          },
          calculateItemHeight: function(index) {
             return 45;
          },
          countItems: function() {
             return CustomerList.length;
          },
          destroyItemScope: function(index, scope) {
             console.log("Destroyed item #" + index);
          }
       };
    }]);

    function ChangeData(){
  CustomerList=["あ","い","う","え","お","か"];
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>

<ons-page ng-controller="MyCtrl">
        <ons-toolbar>
           <div class="center">Lazy Repeat</div>
        </ons-toolbar>
        <ons-list>
           <ons-list-item ons-lazy-repeat="MyDelegate">
              {{item.name}}
           </ons-list-item>
        </ons-list>
        <ons-button onclick="ChangeData();">CustomerList更新</ons-button>
    </ons-page>

1 件の回答 1

1

データの更新をAngularに伝えるためにonclickでなくng-clickを使用してください。その際ChangeData$scopeのプロパティとして定義する必要があります。

var CustomerList=["a","b","c","d","e","f","g","h"];

    ons.bootstrap()
    .controller('MyCtrl', ['$scope', function($scope) {
       $scope.MyDelegate = {
          configureItemScope: function(index, itemScope) {
             itemScope.item = {
                name: 'Item #' + (CustomerList[index])
             };
          },
          calculateItemHeight: function(index) {
             return 45;
          },
          countItems: function() {
             return CustomerList.length;
          },
          destroyItemScope: function(index, scope) {
             console.log("Destroyed item #" + index);
          }
       };
      
       $scope.ChangeData = function(){
         CustomerList=["あ","い","う","え","お","か"];
       };
    }]);
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>

<ons-page ng-controller="MyCtrl">
        <ons-toolbar>
           <div class="center">Lazy Repeat</div>
        </ons-toolbar>
        <ons-list>
           <ons-list-item ons-lazy-repeat="MyDelegate">
              {{item.name}}
           </ons-list-item>
        </ons-list>
        <ons-button ng-click="ChangeData();">CustomerList更新</ons-button>
    </ons-page>

2
  • 初心者です。現在MONACAを使用しアプリ開発を行っております。 こちらの回答を参考させて頂きました。 こちらではまず配列が用意されていますが、実用する際sqliteのdbからCustomerListへの代入の行い方がわかりません、いろいろ検索するも、近い回答がなくわからない状況です。 是非教えて頂けませんでしょうか、よろしくお願いします。
    – Udai
    Commented 2015年11月17日 8:35
  • 取得したデータをpushすれば解決すると思います。やり方は人それぞれですが、一例として自分が書いた質問を参考にしてください。Monaca InAppBrowserプラグインでWebView表示後、Web SQLで「no such table」エラーが発生する
    – otak-lab
    Commented 2015年11月17日 9:02

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

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