我如何创建离子 select 框？

Question

我正在做一个离子项目，想创建一个 ionic select box，如图 documentation page

这里是 codepen link，我将正在处理的示例的样本放在这里。

<ion-view view-title="Home">
      <ion-content class="padding">
        <ion-list>
          <ion-item>
            <ion-label>Toppings</ion-label>
            <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
              <ion-option value="bacon" checked="true">Bacon</ion-option>
              <ion-option value="olives">Black Olives</ion-option>
              <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
              <ion-option value="peppers">Green Peppers</ion-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>

Select 框未显示，而是 <ion-option> 的所有值都出现在同一行中。

如何确保它看起来与文档示例中显示的相同？

Answer 1

您粘贴的模板和您指向的文档页面适用于 Ionic2/Angular2，但您使用的是 Ionic 1.3.1。

您可以在 Ionic 1.3 here

中找到 select 的文档

我如何创建离子 select 框？

How do i create a ionic select box?

ionic-framework

ionic-view