How to make Dropdown List in ONSEN-UI?

Question

I am developing phonegap application and for this I want Dropdown Menu in my ONSEN page.
How to achieve it?
Please help.

Answer 1

You can use an <ons-popover> element as a dropdown. I made a simple example:

http://codepen.io/argelius/pen/MYzVYb

To define a popover you use <ons-template> (or put it in a separate file).

<ons-template id="popover.html">
  <ons-popover cancelable direction="down">
    <ons-list>
      <ons-list-item ng-repeat="option in options" modifier="tappable">
        {{ option }}
      </ons-list-item>
    </ons-list>
  </ons-popover>
</ons-template>

In a controller you can defined the scope:

angular.module('myApp').controller('DropdownController', function($scope) {
  ons.ready(function() {
    ons.createPopover('popover.html').then(function(popover) {
      $scope.popover = popover;
    });
  });

  $scope.options = ['Load', 'Sync', 'Settings'];
});

This controller should be a parent to the popover so you should attach it to the body.

Then you can trigger the popover using ngClick:

<ons-page>
  <ons-toolbar>
    <div class="center">Dropdown example</div>
    <div class="right">
      <ons-toolbar-button ng-click="popover.show($event)"><ons-icon icon="ion-navicon"></ons-icon></ons-toolbar-button>
    </div>
  </ons-toolbar>
</ons-page>