里面有文本框的复选框

Question

我有 ionic 3 / Angular 复选框列表，如图所示 below.It 正在工作 fine.But 现在我有一个要求，如果 i.display 是 Other 那么checkbox 应转换为 textbox，如下所示 video.Do 您知道如何创建这样的组件或任何现有的此类组件吗？

Video about Checkbox with textbox inside

.html

  <ion-list>
        <ion-item *ngFor="let i of inputs">
          <ion-label>{{i.display}}</ion-label>
          <ion-checkbox name="{{i.label}}" [(ngModel)]="i.checked"></ion-checkbox>
        </ion-item>
  </ion-list>

Answer 1

您可以构建自定义组件，通过 ng-if-else 语句和 ng-template.

控制显示复选框或输入

我只是用普通的 HTML 元素做了一个例子，见 here。

抱歉，我对 ionic 了解不多，您可能需要将这些元素转换为离子元素。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngIf="showCheckbox; else elseBlock">
        <label for="checkbox" (click)="toggle(false)">
          <input id="checkbox" type="checkbox">test
        </label>
      </div>
      <ng-template #elseBlock>
        <input type="text" (keypress.enter)="toggle(true)" (blur)="toggle(true)">
      </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  showCheckbox = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  toggle(value) {
    this.showCheckbox = value;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

里面有文本框的复选框

Checkbox with textbox inside

ionic-framework

ionic2

ionic3

angular