Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. heel_curve5
    H
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    heel_curve5

    @heel_curve5

    0
    Reputation
    14
    Posts
    698
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    heel_curve5 Follow

    Posts made by heel_curve5

    • Scroll to selected item in ons-list and Angular JS

      I have an ons-list with ng-repeat. Need to scroll to selected item when list is done loading. Each item also has a unique ID. Tried to find the item and call scrollIntoView() or scroll() methods but they are undefined. How do I accomplish this ?
      Thank you
      Andy

      posted in Onsen UI
      H
      heel_curve5
    • RE: lazy-repeat refresh method is undefined

      @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

      posted in Onsen UI
      H
      heel_curve5
    • RE: lazy-repeat refresh method is undefined

      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

      posted in Onsen UI
      H
      heel_curve5
    • RE: lazy-repeat refresh method is undefined

      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

      posted in Onsen UI
      H
      heel_curve5
    • RE: lazy-repeat refresh method is undefined

      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
          });
      })();
      
      posted in Onsen UI
      H
      heel_curve5
    • RE: searchable list with lazy-repeat

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

      posted in Onsen UI
      H
      heel_curve5
    • RE: lazy-repeat refresh method is undefined

      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

      posted in Onsen UI
      H
      heel_curve5
    • lazy-repeat refresh method is undefined

      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

      posted in Onsen UI
      H
      heel_curve5
    • RE: searchable list with lazy-repeat

      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

      posted in Onsen UI
      H
      heel_curve5
    • searchable list with lazy-repeat

      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

      posted in Onsen UI
      H
      heel_curve5