

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

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

[code]

    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=["あ","い","う","え","お","か"];
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-08-28T03:49:48.063
14929
2016-02-15T12:13:08.380
2015-08-28T05:49:50.670
8532
11104
question
monaca onsen-ui
データベースの結果セットをons-razy-repeatを用いて表示する


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

[code]

    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=["あ","い","う","え","お","か"];
           };
        }]);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-08-28T04:37:12.893
14931
2015-08-28T04:43:32.923
2015-08-28T04:43:32.923
8532
8532
14929
answer