Как сделать так, чтобы ионный вход отображался при выборе опций в окне выбора ионов без нажатия кнопки ОК? - PullRequest
Новая
       22

Как сделать так, чтобы ионный вход отображался при выборе опций в окне выбора ионов без нажатия кнопки ОК?

0 голосов
/ 10 ноября 2018

Я использую ion-select, чтобы позволить пользователю выбирать опции, а внутри ion-option есть список опций, из которых пользователь выбирает один. Если пользователь выбирает параметр «Другие», автоматически появляется ввод, поэтому пользователь вводит параметр, недоступный в раскрывающемся списке.

Теперь мне нужно использовать ion-select без кнопок OK и CANCEL. Поскольку я уже реализовал, мне нужно показать поле ввода ионов, чтобы оно появлялось автоматически, когда пользователь выбирает опцию «Другие». Эта логика работает правильно, если я использую кнопку OK & CANCEL.

Теперь мне нужно реализовать ту же логику без кнопок OK и CANCEL. Ионный вход появляется только в том случае, если пользователь выбирает опции «Другие» и нажимает кнопку «ОК». Поскольку я не хочу использовать здесь какие-либо кнопки, я хочу, чтобы поле ионного ввода «Другие» отображалось непосредственно, как только пользователь выбирает параметр «Другие» в раскрывающемся списке, не нажимая кнопку ОК.

Вот что я пробовал до сих пор в моем HTML: 

<ion-select class="mydate" formControlName="bankselect" [(ngModel)]="vm.bankselect" interface="popover" (ionChange) = "bankChange($event)"  class="textcolor" value="bank">
                  <ion-option *ngFor="let item of banklist; let i =index"  value="{{i}}">{{item.value}}</ion-option>
                </ion-select>

<ion-item no-lines *ngIf = "vm.bankselect == 6">
                    <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
                    <ion-label floating color="primary">Others</ion-label>
                    <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input>  
               </ion-item>

1 Ответ

0 голосов
/ 10 ноября 2018

Я не уверен, но, возможно, вам стоит попробовать (ionSelect).

в вашем .html файле должно быть так. 

   <ion-select "some codes...">
  <ion-option *ngFor="...." "some codes..."   (ionSelect)="showInput(item.value)"></ion-option>
  </ion-select>

<ion-item no-lines *ngIf = "show">
                <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
                <ion-label floating color="primary">Others</ion-label>
                <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input>  
           </ion-item>

и .ts файл 

show: boolean = false;

showInput(item){
if(item == 'other'){
this.show = true;
}
else
this.show = false;
}
...