离子输入并排选择

Question

我有一个输入和一个我希望并排显示的选择。

我尝试了几种方法但没有用。

目前的代码如下

<form name="signup">
<ion-list>
<label class="item item-input">
<input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
</label>
<label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
<div class="input-label">Tipo de Identificación</div>
<select ng-model="registro.tipo_id">
<option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
</select>
</label>
</ion-list>
</form>

这输出以下内容：

我需要将输入放在左侧，将选择放在同一行中。

有什么想法吗？

Answer 1

您可以简单地使用离子网格系统，但将它们并排放置不会让您在手机上占用很多空间。您可以在此处详细了解：http://ionicframework.com/docs/components/#grid-explicit

<form name="signup">
<ion-list>
**<div class="row">**
**<div class="col">**
<label class="item item-input">
<input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
</label>
</div>
**<div class="col">**
<label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
<div class="input-label">Tipo de Identificación</div>
<select ng-model="registro.tipo_id">
<option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
</select>
</label>
</div>
</div>
</ion-list>
</form>

Answer 2

你可以尝试这个::

<ion-grid>
  <ion-row>
   <ion-col width-50>
   <ion-item>
    <ion-label color="primary">Inline Label</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
  </ion-item>
 </ion-col>
 <ion-col width-50>
    <ion-item>
       <ion-label>Minute 2</ion-label>
       <ion-select [(ngModel)]="inr">
       <ion-option value="h1">5</ion-option>
       <ion-option value="h2">6</ion-option>
       <ion-option value="h3" >7</ion-option>
       </ion-select>
    </ion-item>
    </ion-col>
  </ion-row>
  </ion-grid>

Answer 3

enter image description here有一种简单的方法可以做到这一点。 只需要使用item，item-end和item-start。 然后只需添加一行CSS。

    .input-cover{
        width: 0%;
    }

    <ion-item *ngFor="let telefono of cliente.telefonos;index as i;trackBy:identify">
      <ion-select item-start placeholder="Celular" name="tipo" [(ngModel)]="telefono.tipo">
        <ion-option>Celular</ion-option>
        <ion-option>Casa</ion-option>
      </ion-select>
      <ion-input type="tel" item-end placeholder="Numero" name="numero" [(ngModel)]="telefono.numero"></ion-input>
    </ion-item>

Answer 4

您可以使用item-input-inset类

    <form name="signup">
  <ion-list>
    <div class="item-input-inset">
      <div>
        <label class="item item-input">
          <input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
        </label>
      </div>
      <label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
        <div class="input-label">Tipo de Identificación</div>
          <select ng-model="registro.tipo_id">
            <option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
          </select>
      </label>
    </div>
  </ion-list>
</form>