View database result sets using ons-razy-repeat

We have written a code that stores the database query results in the global variable "CustomerList" and displays the contents in "ons-razy-repeat" of "ons-list".
"When I press a button, I would like to re-query the database, change the entire contents of the global variable ""CustomerList"", and change the contents of the ""ons-list"" display accordingly."If you simply change the contents of "CustomerList", the display is strange (it takes time to display or
). , the height of the list may be longer).

When the CustomerList is updated, I think I have to reset it once, but I didn't understand it well from the manual.
How should I handle it?

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){
             return45;
          },
          countItems: function(){
             return CustomerList.length;
          },
          destroyItemScope: function(index,scope){
             console.log("Destroyed item#"+index);
          }
       };
    }]);

    functionChangeData(){
  CustomerList=["a", "i", "u", "e", "o", "ka";
}

<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-pageing-controller="MyCtrl">
        <ons-toolbar>
           <div class="center"> Lazy Repeat</div>
        </ons-toolbar>
        <ons-list>
           <ons-list-itemons-lazy-repeat="MyDelegate">
              {{item.name}}
           </ons-list-item>
        </ons-list>
        <ons-button onclick="ChangeData();">CustomerList Update</ons-button>
    </ons-page>

monaca onsen-ui

2022-09-30 19:40

1 Answers

Use ng-click instead of onclick to communicate data updates to Angular.ChangeData must then be defined as a property of $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){
             return45;
          },
          countItems: function(){
             return CustomerList.length;
          },
          destroyItemScope: function(index,scope){
             console.log("Destroyed item#"+index);
          }
       };
      
       $scope.ChangeData=function(){
         CustomerList=["a", "i", "u", "e", "o", "ka";
       };
    }]);

<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-pageing-controller="MyCtrl">
        <ons-toolbar>
           <div class="center"> Lazy Repeat</div>
        </ons-toolbar>
        <ons-list>
           <ons-list-itemons-lazy-repeat="MyDelegate">
              {{item.name}}
           </ons-list-item>
        </ons-list>
        <ons-buttoning-click="ChangeData();">CustomerList Update</ons-button>
    </ons-page>

2022-09-30 19:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656