Question

我有离子3 / Angular复选框列表，如下所示。它工作正常。但是现在我有一个要求，如果i.display是Other那么checkbox应该被转换为textbox如下图所示。您是否知道如何创建此类组件或任何现有此类组件？

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 {}

带有文本框的复选框

1 个答案: