Monaca Onsen UI Discord Chat Github Repo

Need Help on Using Infinite List with Lazy Repeat



  • Does anyone have an idea or have used Infinite List / Lazy-repeat that work on VS2015 as an IDE?



  • @john.salazar Maybe @Leonardo-Augusto can help out? He uses VS where I use the cloud IDE.



  • @john.salazar said:

    Does anyone have an idea or have used Infinite List / Lazy-repeat that work on VS2015 as an IDE?

    ons.bootstrap()
      .controller('ListController', ['$scope', function ($scope) {
          $scope.MyDelegate = {
              configureItemScope: function (index, itemScope) {
                  console.log("Created item #" + index);
                  itemScope.item = {
                      name: 'Item #' + (index )
                  };
              },
              calculateItemHeight: function (index) {
                  return ons.platform.isAndroid() ? 48 : 44;
              },
              countItems: function () {
                  return 10000;
              },
              destroyItemScope: function (index, scope) {
                  console.log("Destroyed item #" + index);
              }
          };
      }]);
    
    
    
    
    
    
    <body>
        <ons-page ng-controller="ListController">
            <ons-toolbar>
              <div class=“center”>Lists</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item ons-lazy-repeat="MyDelegate">
                    {{item.name}}
                </ons-list-item>
            </ons-list>
        </ons-page>
        <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
        <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
        <script src="index.js"></script>
    
    
    
    </body>
    

    0_1468890666755_2016-07-18.png



  • @Leonardo-Augusto Thank you for responding!



  • @munsterlander ;) Hope it helps! I saw in the morning but i was far way



  • @munsterlander and @Leonardo-Augusto

    Thank you guys!!! It works pretty well.



  • @john.salazar Nice .! Glad for u ! An upvote is welcome!


  • Onsen UI

    So what was the problem at the end? Glad you guys could fix it :)



  • @Fran-Diox

    I think its the version of the angular.min.js and onsenui.min.js. If I use the default from the VS, the code will not work. Even the code from the Onsen UI tutorial works fine now using the same version that @Leonardo-Augusto specified from his code.

    But here’s the thing. If I put the Infinite List on the other page, the list will not work again. Using the default splitter menu template from the VS and place the code on another page and also use the version 1.13.11 for onesen.min.js, the menu will work fine, but the infinite list will not give me the correct output. It will be same as this {{item.name}}

    <ons-template id=“another-page.html”>
    <ons-page ng-controller=“ListController”>
    <ons-toolbar>
    <div class=“left”>
    <ons-toolbar-button onclick=“openMenu()”>
    <ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
    </ons-toolbar-button>
    </div>
    <div class=“center”>
    My List
    </div>
    </ons-toolbar>
    <ons-list>
    <ons-list-item ons-lazy-repeat=“MyDelegate”>
    {{item.name}}
    </ons-list-item>
    </ons-list>
    </ons-page>
    </ons-template>

    Hope you guys can help me again.

    Thanks.



  • @john.salazar said:

    But here’s the thing. If I put the Infinite List on the other page, the list will not work again.

    Try to set the controller here

    <body ng-controller=“ListController”>
    
    <ons-template id=“pageone.html”>
    <ons-page >
    
    </ons-page >
    </ons-template>
    
    <ons-template id=“pagetwo.html”>
    <ons-page >
    
    </ons-page >
    </ons-template>
    </body>
    


  • @Leonardo-Augusto

    Thanks for the reply but still it does not work.

    I’m new with AngularJS, where does exactly the best to setup the controller? and when its being called?


  • Onsen UI

    @john.salazar Wait a second, are you using 1.3.11? The templates in VS should have version 2.0 already. The splitter for example does not exist in v1, and probably the lazy repeat changed a lot.



  • @Fran-Diox

    I guess that’s it. lazy repeat does not work on version 2 only on version 1, and your right splitter menu does not work Version 1. Any advice on how can I use both?



  • @john-salazar Actually the code which @Leonardo-Augusto provided should work on pretty much both versions.

    Here’s a Demo of the code working with version 2 (splitter and lazy list).

    We strongly recommend using version 2, but if you decide you still want to use version 1 then instead of all ons-splitter* elements you can just use ons-sliding-menu.

    Here’s a Demo of the code working with version 1 (sliding menu and lazy list).

    You can see that there is practically no difference between the two.

    In both demos I put everything in the html tab so you can copy it just replacing the script and link tags to point to your local js and css files.

    I don’t have experience with the VS templates, but if you’re having issues about just using the version which you want you can just download the files linked in the demo provided here to make sure you have the correct versions.



  • @IliaSky

    Thank you so much. I used the version 2 and It’s working perfectly.

    I guess the JS files from VS templates are the ones causing the issue.