Question

我正在开发phonegap应用程序，为此，我想在Dropdown页面中找到ONSEN菜单。
如何实现？
请帮忙。

Answer 1

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

要定义弹出窗口，请使用<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>

如何在ONSEN-UI中制作下拉列表？

1 个答案: