Search code examples
onsen-ui

Populate onslist programmatically

I'm trying to build a simple app using Onsen UI and I've setup an empty list that I want to populate with list items in the ons.ready function.

I have this HTML tag on my page:

<ons-list id="deviceInfo"></ons-list>

I'm building a list of ons-list-items and replacing the HTML with the list.

Solution

  • having a controller is real simple though:

    HTML:

    <body ng-app ng-controller="MyCtrl">
   <ons-list>
      <ons-list-item  ng-repeat="item in items">{{item.name}}</ons-list-item>
   </ons-list>
</body>

    Javascript:

    function MyCtrl($scope) {
// When you change the contents of $scope.items in your controller, the View will dynamically change. 
$scope.items = {
    item1 : {
        name : "Hamburgar"
    },
    item2 : {
        name : "Pasta"
    },
    item3 : {
        name : "Potato"
    }
};
}