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


Log in to reply