我想同时显示一个输入和一个选择。
我尝试了几种无济于事的方法。
当前代码如下
<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>
输出以下内容:
我需要在同一行中将输入置于左侧,将选择置于右侧。
有任何想法吗?
最佳答案
您可以简单地使用离子网格系统,但是将它们并排放置不会在电话上留下很多空间。您可以在这里了解更多信息: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>