Currently under development using angularJS and onsenUI.
I tried using onsenUI ons-lazy-repeat, but it doesn't work well.
I was able to add the appropriate method to the main controller, so I don't think it's a misconnection with the controller, but I'm at a loss even if I mess with it.
I would appreciate it if you could point out where the problem is.
index.html
<!DOCTYPE HTML>
<htmlng-app="myApp">
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<script src="components/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="js/xdate.js"></script>
<script src="js/maincontroller.js"></script>
<script src="js/dataservice.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accodinon.css">
<script>
var app = angular.module('myApp', 'onsen', 'mainControllers');
</script>
</head>
<body>
<ons-navigator page="lazy_list_page.html">
</ons-navigator>
</body>
</html>
maincontroller.js
varmainControllers=angular.module('mainControllers',[]);
// Main controller
mainControllers.controller('MainController', ['$scope', 'DataService',
function($scope,DataService){
$scope.MyDelegate={
countItems: function(){
// Return number of items.
return1000000;
},
calculateItemHeight: function(index){
// Return the height of an item in pixels.
return45;
},
configureItemScope:function(index,itemScope){
// Initialize scope
itemScope.item='Item#'+(index+1);
itemScope.hoge='Hoge#'+(index+1);
},
destroyItemScope: function(index,itemScope){
// Optional method that is called when an item is unloaded.
console.log('Destroyed item with index:'+index);
}
};
}
}]);
lazy_list_page.html
<ons-list ng-controller="MainController">
<ons-list-itemons-lazy-repeat="MyDelegate"`>
{{ item}}
{{ hoge}}
</ons-list-item>
</ons-list>
I have verified that this source code works fine. It seems that the module initialization is done using the ng-app directive, but as user7461 said, I think it would be better to customize the sample using ons.bootstrap() first.
index.html
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap()
.controller('MyController', function($scope){
$scope.MyDelegate={
countItems: function(){
// Return number of items.
return1000000;
},
calculateItemHeight: function(index){
// Return the height of an item in pixels.
return45;
},
configureItemScope:function(index,itemScope){
// Initialize scope
itemScope.item='Item#'+(index+1);
},
destroyItemScope: function(index,itemScope){
// Optional method that is called when an item is unloaded.
console.log('Destroyed item with index:'+index);
}
};
});
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
</body>
</html>
page1.html
<ons-page>
<ons-toolbar>
<div class="center"> Navigator</div>
</ons-toolbar>
<ons-list ng-controller="MyController">
<ons-list-itemons-lazy-repeat="MyDelegate"`>
{{ item}}
</ons-list-item>
</ons-list>
</ons-page>
© 2024 OneMinuteCode. All rights reserved.