How to load a list programmatically
-
I’m new to Onsen UI and Monaca, and I’d like to make a simple application that allows me to list the files in a folder on the device and have the user choose it for processing. I’ve placed an ons-list on my page and I’d like to add ons-list-items to it in the ons.ready callback. Here’s my code so far.
<!DOCTYPE HTML> <html ng-csp> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="js/winstore-jscompat.js"></script> <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css"> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap(); ons.ready(function() { $("listSongs").<<I have no idea>> };); </script> </head> <body> <ons-navigator var="myNavigator" page="main.html"> </ons-navigator> <ons-template id="main.html"> <ons-page> <ons-toolbar> <div class="center">Bell Song Player</div> </ons-toolbar> <ons-list id="listSongs"> <ons-list-header> Available Songs </ons-list-header> </ons-list> <ons-button modifier="large">Upload Song</ons-button><br> <ons-button modifier="large">Play Current Song</ons-button> </ons-page> </ons-template> </body> </html>
In the ons.ready callback, can I refer to the ons-list as I have? If so, is there an ‘add’ method I would call to add the list item?
Any help would be greatly appreciated!
Thanks,
Richard