InsightSphere/src/modules/study/case-angular/pages/case-edit/case-edit.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>case-edit</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">case-edit</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-card>
    <ion-item>
      星星打分:<app-edit-ratio-star [value]="score" (onValueChange)="score = $event"></app-edit-ratio-star>
    </ion-item>
    <ion-item>
      图标打分:<app-edit-ratio-star color="blue" fillIcon="home" emptyIcon="home-outline" [value]="score" (onValueChange)="score = $event"></app-edit-ratio-star>
    </ion-item>
    <ion-item>
      <ion-input type="number" [(ngModel)]="score"></ion-input>
    </ion-item>
  </ion-card>

  <ion-card>
    <ion-item>
      已输入用户名:{{username}}
    </ion-item>
    <ion-item>
      <ion-label>Input事件</ion-label>
      <ion-input type="text" (input)="onUserNameInput($event)"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>ngModel双向绑定</ion-label>
      <ion-input type="text" [value]="username" (input)="onUserNameInput($event)"></ion-input>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>
  </ion-card>

  <ion-card>
    <ion-item>
      用户资料:各种输入类型
    </ion-item>
    <ion-item>
      <ion-label>姓名</ion-label>
      <ion-input type="text" [(ngModel)]="userInfo.name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>年龄</ion-label>
      <ion-input type="number" [(ngModel)]="userInfo.age"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>生日</ion-label>
      <ion-datetime [(ngModel)]="userInfo.birthday"></ion-datetime>
    </ion-item>
  </ion-card>

</ion-content>