如何创建离子选择框?

时间:2016-10-09 07:33:34

标签: ionic-framework ionic-view

正在开展一项离子项目并希望创建一个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>

选择框不会显示,而<ion-option>的所有值都显示在同一行中。

如何确保它与文档示例中显示的相同?

1 个答案:

答案 0 :(得分:2)

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

您可以在Ionic 1.3 here

中找到选择的文档