Need Help on Using Infinite List with Lazy Repeat

john.salazar

Hi,
I’m new to using OnsenUI on VS2015. I was trying to implement the Infinite List and Lazy-repeat but its not working. I already tried the code from this site http://tutorial.onsen.io/? framework=angular1&category=Reference&module=lazy-repeat and other examples that I saw from Github and Codepen but all of them comes with the same result. The output would only be like this:

{{ item }} or {{ item.name }}

I use Ripple and Genymotion as my Emulator and even on my Android device, it has the same output.

Do have any examples that uses Lazy repeat and that works on VS2015?

Thank you.

Fran Diox

@john.salazar Hello!

This is independent of the editor or IDE you use. Probably there’s some issue in the code you have.
Are you using Onsen UI 2? We provide an extension for VS2015 where you can find templates. More info here.

You can start from a blank template and write the lazy repeat code. If you want AngularJS just include the file angular-onsenui.js in your index.html.

john.salazar

Thanks for the reply.

The link you provided is actually where I found out about Onsen UI. I followed the procedure on installing the extension and tried the available templates and they work perfectly.

I already created a blank template and download and copied the code from tutorial.onsen.io site but both JS and Angular code version are not giving me a correct output. angular-onsenui.js and angular.min.js are also been included from the project and the version of Onsen UI is version 2.

Here is the code from index.html file:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<meta name=“mobile-web-app-capable” content=“yes” />

<script src=“scripts/platformOverrides.js”></script>
<script src=“lib/onsen/js/onsenui.js”></script>

<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsen/js/angular-onsenui.js"></script>

<link rel=“stylesheet” href=“lib/onsen/css/onsenui.css” />
<link rel=“stylesheet” href=“lib/onsen/css/onsen-css-components-blue-basic-theme.css” />

<title>Onsen UI</title>

</head>

<body>

<script src=“cordova.js”></script>
<script src=“scripts/index.js”></script>

<ons-page>
<ons-toolbar>
<div class=“center”>Lists</div>
</ons-toolbar>
<ons-list ng-controller=“ListController as list”>
<ons-list-item ons-lazy-repeat=“list.delegate”>{{ item }}</ons-list-item>
</ons-list>
</ons-page>

</body>
</html>

=============
Here is the code from app.js file:

ons.bootstrap()
.controller(‘ListController’, function() {
this.delegate = {
configureItemScope: function(index, itemScope) {
itemScope.item = 'Item ’ + index;
},
countItems: function() {
return 10000;
},
calculateItemHeight: function() {
return ons.platform.isAndroid() ? 48 : 44;
}
};
});

=========
All JS and CSS dependencies are properly set and included from the project. The output from the emulator and actual device are the same:

        {{ item }}

I don’t know what else I’m missing from the code. Hope you could help me on how to implement properly the Infinite List with the lazy repeat.

Thank you in advance Fran.

john.salazar

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

munsterlander

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

Leonardo Augusto

@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>

munsterlander

@Leonardo-Augusto Thank you for responding!

Leonardo Augusto

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

john.salazar

@munsterlander and @Leonardo-Augusto

Thank you guys!!! It works pretty well.

Leonardo Augusto

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

Fran Diox

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

john.salazar

@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.

Leonardo Augusto

@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>

john.salazar

@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?

Fran Diox

@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.

john.salazar

@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?

IliaSky

@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.

john.salazar

@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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Need Help on Using Infinite List with Lazy Repeat

Here is the code from index.html file: