3. How to load a list programmatically

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to load a list programmatically

  • R

    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

    0