Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. RichardInVA
    R
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    RichardInVA

    @RichardInVA

    0
    Reputation
    1
    Posts
    539
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    RichardInVA Follow

    Posts made by RichardInVA

    • 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

      posted in Developer Corner
      R
      RichardInVA