2017-01-30 21 views
3

イオンバーストを持つイオン選択を作成する必要がありますが、それは可能ですし、どうすればいいですか? 同じアラート内で異なる入力タイプを混在させることができないため、検索入力とその中のラジオ・オプションを含むアラートを作成しようとしましたが、できませんでした。事前に検索バーでイオン選択します

おかげ

答えて

1
<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script> 
    <script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script> 
    <script src="config.js"></script> 
    <script src="https://npmcdn.com/[email protected]/bundles/ionic.system.js"></script> 

    <link href="https://npmcdn.com/[email protected]/bundles/ionic.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
    </head> 

    <body> 
    <!-- this Ionic's root component and where the app will load --> 
    <ion-app></ion-app> 

    <script> 
     System.import('app.ts') 
    </script> 
    </body> 

</html> 

ライブデモ - http://plnkr.co/edit/BX323jPnqfgGTZCU1Ta3?p=preview

+1

OPああ –

+0

V1ないイオン2について尋ねている)多分これは、あなたは、httpを助ける:// plnkr .co/edit/BX323jPnqfgGTZCU1Ta3?p = preview – grinmax

+0

回答を編集して正しいコードを追加してください.. –

3

は、私は私が代わりに、アラートのPopoverControllerを使用し、それは私が(内部のコンポーネントを追加することができ、これを行うには、別の回避策を見つけました私の場合はオートコンプリートサーチページ)それは検索バーとリストが含まれており、これまでに何が必要ですか?

import { 
 
    PopoverController 
 
} 
 
    
 
from 'ionic-angular'; 
 
constructor(public navCtrl: NavController, public navParams: NavParams, 
 
    public popoverCtrl: PopoverController) { 
 

 

 

 
    let popover = this.popoverCtrl.create(AutoCompleteSearchPage, { 
 
     
 
     dataContext: this.DataContext, 
 
     autocomplete: this, 
 
     ispopover: true, 
 
    }); 
 
    popover.present({ 
 
     ev: myEvent 
 
    });

検索ページのHTMLテンプレート:

<ion-header> 
 

 
    <ion-navbar> 
 
     <ion-title> 
 
      {{LookUpTableName}} 
 
     </ion-title> 
 
    </ion-navbar> 
 

 
</ion-header> 
 

 
<ion-content> 
 
    <ion-searchbar (ionInput)="runSearch($event,viewmodel)" style="padding:5px"></ion-searchbar> 
 
    <ion-refresher (ionRefresh)="doRefresh($event)"> 
 
     <ion-refresher-content pullingIcon="arrow-dropdown" 
 
           pullingText="Pull to refresh" 
 
           refreshingSpinner="circles" 
 
           refreshingText="Refreshing..."> 
 
     </ion-refresher-content> 
 
    </ion-refresher> 
 
    <ion-list> 
 
     <button ion-item *ngFor="let item of dataList" (click)="selectItem(item)"> 
 
      {{item?.Name}} 
 
     </button> 
 
    </ion-list> 
 
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
 
     <ion-infinite-scroll-content loadingSpinner="bubbles" 
 
            loadingText="Loading more data..."> 
 
     </ion-infinite-scroll-content> 
 
    </ion-infinite-scroll> 
 
</ion-content>

+1

こんにちは、複数の選択を持っている方法です – Yasir

+2

こんにちは、リスト内のボタンの代わりにチェックボックスを使用し、選択した項目を保存するには、項目を配列に追加して、選択を解除します)https://ionicframework.com/docs/api/components/checkbox/Checkbox/ – Islam

+0

こんにちは@Islam私は、コンポーネントを選択すると、アラート/ポップオーバーの代わりにカスタムのポップオーバーが開き、オプション値が表示されますか? – Mario

関連する問題