离子中的下拉菜单

Question

我刚开始使用离子框架，尝试将现有的角度应用程序作为混合应用程序进行移动。

有没有办法在离子中做一个下拉菜单？我搜索了离子网站/论坛，也搜索过，但找不到任何方法。

Answer 1

使用$ionicPopover

离子框架中包含的服务可提供您正在寻找的内容。

这是我几个月前工作的一个例子：

<强> events-dropdown-view.html

<ion-popover-view>
    <ion-content has-bouncing="true">
        <div class="list">
            <a class="item" ui-sref='create-event' ng-click="vm.popover.hide()" >
                New Event
            </a>
        </div>
    </ion-content>
</ion-popover-view>

events-view.html

<button class="button button-icon" ng-click="vm.popover.show($event)"> <i class="icon ion-android-more-vertical"></i></button>

controller.js

app.controller("EventsController", function ($scope, $ionicPopover) {
    var vm = this;

    // Popover ( a.k.a dropdown )
    // ----------------------------------

    $ionicPopover.fromTemplateUrl('src/events/events-dropdown-view.html', {
        scope: $scope
    }).then(function (popover) {
        vm.popover = popover;
    });

    // ----------------------------------

    // ...

Answer 2

我不知道这是否会有所帮助。这帮助我解决了同样的问题 http://ionicframework.com/docs/components/#select

<div class="list">


<label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>

</div>