ionic으로 검색 양식을 만들어 보았습니다.

4869 단어 ionic

할 수있는 것



우선 먼저 어떤 것을 만들 것인가라고 하는 곳입니다만 밑그림입니다.


검색 조건이 추가되어 가는 느낌의 폼입니다.
ionic이 자동으로 생성하는 프로그램 부분은 생략하고, 이번에 추가한 코드만 기재하고 있습니다.

home.ts
export class HomePage {

// 省略

  public wordInput: string = '';
  public words: string[] = [];

  addWord(formValue) {
    this.words.push(formValue.wordValue)
    this.wordInput = ''
  }

  delete(idx: number) {
    this.words.splice(idx, 1);
  }

}

home.html
<form #form="ngForm" (ngSubmit)="addWord(form.value)">
  <ion-item>
    <ion-label>
      <ion-icon name="search"></ion-icon>
    </ion-label>
    <ion-input [(ngModel)]="wordInput" name="wordValue"></ion-input>
    <button ion-button item-right type="submit" icon-only>
      <ion-icon name="md-arrow-forward"></ion-icon>
    </button>
  </ion-item>
</form>
<div class="tags">
  <ion-chip *ngFor="let word of words; let i = index" id="word_{{i}}">
    <ion-label>{{ word }}</ion-label>
    <button ion-button clear color="dark" (click)="delete(i)">
      <ion-icon name="close-circle"></ion-icon>
    </button>
  </ion-chip>
</div>

home.scss
.tags {
  display: flex;
  padding-top: 5px;
  overflow: scroll;
}

좋은 웹페이지 즐겨찾기