@emccorson said in lazy-repeat refresh method is undefined:

app

Aha!
That was it! Now it works
Thank you all very much for help!
Andy

Thank you so much for pointing me to that tool. I was able to get the lazy list to work - created a skeleton Angular JS project,added the lazy load sample code to it and it worked!
However here is another problem.
It only works if the app is bootstrapped with my app=ons.bootstrap()…etc etc, like in the sample. My app is structured differently. I have a main module that is defined like this

main-module.js

(function () {
'use strict';  
var MyApp= angular.module('SmartConApp', ['onsen,'ngCordovaOauth','rzModule', 'swipe'])
.run(run);
    run.$inject = ['$rootScope']; 	

    function run($rootScope, {
    	LogIt("APP MAIN");
    	// app initialization
    }
    ons.ready(function() {	
        LogIt("Onsen UI is ready!"); 
        // init plugins
    });
})();

The problem is that ons-ready is never called and neither is the run function
Any ideas?
Thank you so much for help

This is not an open source project .
One thing that I’m suspicious of is the way the project is set up.
It started as a Monaca project online IDE but then was copied locally and development continued. So the project index.html file does not inclde onsenui.js,angular.js etc. but instead includes loader.js
However all other framework elements work just fine. The project uses ons-list, ons-tabbar, ons-navigator, ons-modal, etc and everything works,lazy-repeat is the only one thing that does not.
Perhaps I neeed to revisit the way the project is organized ,get rid of the loader.js and use standard onsenui.js, angular.js and whatever else may be needed.
Can you point me to a sample Onsen Angular JS skeleton project?
Thanks
Andy

No luck
SImplified my code as much as possible. It looks like this now
lazylist.html

<ons-page ng-controller="ListController as list">
  <ons-toolbar>
    <div class="center">Lists</div>
    <div class="right">
      <ons-toolbar-button ng-click="list.doRefresh()">Refresh</ons-toolbar-button>
    </div>
  </ons-toolbar>

  <ons-list>
    <ons-list-item ons-lazy-repeat="list.delegate">{{ item }}</ons-list-item>
  </ons-list>
</ons-page>

The listcontroller.js

angular.module('MyApp')
        .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;
		      }
		    };
		    
		   this.doRefresh=function(){
			   this.delegate.refresh();//fails because refresh is not defined
		   }
        });

The only remaining difference between the sample and my code is the way onsen framework is initialized
The sample uses

ons.bootstrap()
  .controller('ListController', function() .....

whereas my code uses

angular.module('MyApp')
        .controller('ListController', function()....

Could this be the problem?
My app main module is defined in another file as follows

(function () {
   'use strict';    
    var MyApp= angular.module('MyApp', ['onsen','ngCordovaOauth','rzModule', 'swipe'])
    .run(run); 
    run.$inject = ['$rootScope'];
  function run($rootScope) {
    	//app init
    }
    ons.ready(function() {
       // init plugins
    });
})();

Great, Thank you!
I’ll give it a try as soon as I get lazy-repeat to work… discussed in another post.

The refesh method is not used immediately but only when the data is loaded from the server which takes at least a couple of seconds
Also I made a test where I just basically do exactly as in the sample i.e set the item count to some number, i.e 100, and in configurItemScope just do

itemScope.item = "item" + index;

Still the list is empty.
Perhaps it’s some library that I’m missing? Or version incompatibility?
Thanks
Andy

Hello I have an Angular JS application where a list is defined as follows

<ons-page ng-controller="AllItemsController">
<ons-list>
<ons-list-item ons-lazy-repeat="lazyLoadDelegate"
class="list__item__line-height" 
ng-class="{selected_list_row:isItemSelected(item),selected:item.selected}">
 <span>{{item.name}}</span>
</ons-list-item>
 </ons-list>
</ons-page>

The controller and the delegate are defined as follows

(function () {
    'use strict';
    angular
        .module('MyApp')
        .controller('AllItemsController', AllItemsController);

AllItemsController.$inject = ['$scope']; 
   
AllItemsController($scope) {    	
    	$scope.lazyLoadDelegate = {
      	      configureItemScope: function(index, itemScope) {
      	    	if(index < itemsList.length ){
      	    		itemScope.item = $scope.itemsList[index];
      	    	}
      	      },
      	      countItems: function() {
      	        return $scope.itemsList.length;
      	      },
              calculateItemHeight: function() {
                  return  44;
              }
    	};
$scope.$on(EventManager.EVT_ALL_ITEMS_FETCHED, function(event,data){
    		$scope.lazyLoadDelegate.refresh();
    		$scope.$apply();    		
    	});
}// AllItemsController
    	
})();

When the event fires and $scope.lazyLoadDelegate.refresh is called I get an error that refresh method is undefined.
Examining the $scope.lazyLoadDelegate variable in the debugger shows that the refresh method is indeed not there
Also when I put breakpoints in any delegate methods they are not hit.
I use Onsen UI v 2.10.5 and Angular.js v1.6.9
What am I missing??
Thanks
Andy

I forgot to mention that In the current implementation there is a search row defined as follows

 <div class="search-row">
 <input type="search" placeholder="Search Items"  ng-model="search" />
 </div>

So when user starts typing in the input field
this line

ng-repeat="item in itemsList|filter:search track by item.id" 

handles displaying only items that match the search criteria
If I understand you correctly with lazy-repeat I will have to do this myself in the controller, i.e intercept user entering characters and fill the itemsList accordingly?
Thanks
Andy

In my Angular js app I have a searchable ons-list with ng-repeat directive defined as follows

<ons-list>
  <ons-list-item bindonce ng-repeat="item in itemsList|filter:search track by item.id" >
{{name}} 
</ons-list-item>
</ons-list>

I want to use ons-lazy-repeat to improve performance - the question is, how do I make the list with lazy-repeat searchable as above?
Thanks
Andy

My tab bar is defined as follows

<ons-tabbar class="bg-grey" var="myTabBar"> 

I put a breakpoint in the code and examined the myTabBar variable
The loadPage method is in the class that tab bar inherits from.
In chrome://inspect hover over the tabbar variable and click on “proto” to see all parent methods.