如何在ONSEN-UI中生成下拉列表？

Question

我正在开发phonegap应用程序，为此，我希望Dropdown菜单在我的ONSEN页面中。

如何实现这一目标？

请帮帮忙。

Answer 1

您可以使用<ons-popover>元素作为下拉列表。我举了一个简单的例子：

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

要定义一个弹出程序，您可以使用<ons-template> (或者将它放在一个单独的文件中)。

<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>

在控制器中，可以定义范围：

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'];
});

这个控制器应该是弹出器的父控件，所以您应该将它附加到主体上。

然后，您可以使用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>