Monaca Onsen UI Discord Chat Github Repo

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.

    <html ng-csp>
        <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">
                $("listSongs").<<I have no idea>>
        <ons-navigator var="myNavigator" page="main.html">
        <ons-template id="main.html">
                    <div class="center">Bell Song Player</div>
                <ons-list id="listSongs">
                        Available Songs
                <ons-button modifier="large">Upload Song</ons-button><br>
                <ons-button modifier="large">Play Current Song</ons-button>

    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!