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