リムーバブル入力/ラベル（イオン2）で検索

Question

私は検索があり、ユーザーはその成分で検索することができるレシピアプリケーションを作成しています。次の入力を入力するためにスペースバーに触れると、その横にXが付いたラベルが表示され、関連する入力は選択解除されるようにする機能が必要です。

私の検索では、現在

のように見えます。しかし、それは下のラベルを持つように見えるようにするために狙いです。

これはIonic 2アプリのためのものです。これは誰でも前にやチュートリアルで行ったことがありますか？または、私に助けをしたい、それは素晴らしいだろう。

NEW：ちょうどページの一番下にスタックオーバーフロー「タグ」セクションでは、私はこれは

Answer 1

this plunkerのようなものがあります。改善の余地があります（さらにいくつかのバリデーションがあります）が、デモはあなたが探しているものです。

ビューで次に

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 

@Component({ 
    ... 
    ... 
}) 
export class HomePage { 

    public myForm: FormGroup; 
    public tags: Array<string>; 

    constructor(public formBuilder: FormBuilder) { 
    this.tags = ['tag1', 'tag2', 'tag3']; 
    this.myForm = this.formBuilder.group({ 
     tags: [''] 
    }); 

    // Add an async validation for the username 
    this.myForm.get('tags') 
     .valueChanges 
     .subscribe((value: string) => { 
      if(value.indexOf(' ') > -1) { 
      let newTag = value.split(' ')[0]; 
      console.log(newTag); 
      if(newTag) { 
       this.tags.push(newTag); 
       this.myForm.get('tags').setValue(''); 
      } 
      } 
     }); 
    } 

    public deleteTag(tagName: string) { 
    // Find the index of the tag 
    let index = this.tags.indexOf(tagName); 

    // Delete the tag in that index 
    this.tags.splice(index, 1); 
    } 
} 

：

<ion-header> 
    <ion-navbar> 
    <ion-title>HomePage</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding>  
    <form [formGroup]="myForm"> 
    <ion-item> 
     <ion-input formControlName="tags" type="text"></ion-input> 
    </ion-item> 
    </form> 

    <div class="tag-container"> 
    <span class="tag" *ngFor="let tag of tags"> 
     {{ tag }} 
     <ion-icon name="close" (click)="deleteTag(tag)"></ion-icon> 
    </span> 
    </div> 
</ion-content> 

そして最後にではなく、少なくとも、CSS

コードは、最も関連性の高い部分があり、非常に簡単です！

.tag-container { 
    border: 1px solid #ccc; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    padding: 10px; 
    margin: 10px; 
} 

.tag { 
    display: inline-block; 
    background-color: #5bc0de; 
    color: #fff; 
    margin: 5px 5px; 
    padding: 2px 5px; 
} 

Answer 2

を実現したい正確な方法であることを、私はデータの観点からこの問題にアプローチでしょう気づきましたモデル。あなたがダウンし、そのコアに欲しいものを隔離するときは、検索フィールドの各入力イベントのために、

1. あなたが最後の言葉を取り除く言葉
2. の配列に検索語を変換するように何かをしたいですその配列からとラベル
3. のあなたの配列は、あなたがあなたの配列の最後の言葉を取るし、だからあなたの入力

の値は、のは、あなたのコンポーネントが

のようなものであるとしましょうということにすることを確認

したがって、検索入力を@ angular/formsパッケージのFormControlにバインドして、必要に応じて値をプログラムで設定できるようにします（さらに、インポートするFormsModuleの他のメリットの利点もあります） 。 また、検索入力フィールドおよび各イベントの入力イベントを監視し、必要に応じてラベルを更新し、入力フィールドを更新する必要があります。

上記の操作を開始することができます。エッジケースを処理するために余分なロジックが必要になる場合がありますが、必要に応じてデバウンスを追加したいかもしれませんが、少なくともこれはあなたの考えを得ることができます。