How to load a list programmatically

RichardInVA

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