Ionic2離子選擇與搜索欄

我需要創建一個離子選擇，其中有一個搜索欄，這是可能的，我該怎麼做？我也嘗試創建一個警報，其中包含一個搜索輸入和一個收音機選項，我不能這樣做，可能是因爲我不能在同一個警報內混合不同的輸入類型。Ionic2離子選擇與搜索欄

在此先感謝

2017-01-30 Islam

<!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

來源

2017-01-30 09:26:57 grinmax

OP詢問有關離子2不是V1 –

哦），也許這有助於你的http：// plnkr .co/edit/BX323jPnqfgGTZCU1Ta3？p =預覽 – grinmax

編輯您的答案並添加正確的代碼.. –

我發現了另一個解決辦法要做到這一點，我使用的PopoverController而不是警覺，它可以讓我裏面添加一個組件（在我的情況下它的名字AutoCompleteSearchPage）它包含搜索欄和列表以及我需要使用的東西

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>

來源

2017-02-01 07:40:56 Islam

嗨，有沒有辦法有多個選擇 – Yasir

嗨，你可以使用複選框而不是列表中的按鈕，並將其綁定到一個數組存儲所選（選擇添加項目的陣列，取消選擇刪除它）https://ionicframework.com/docs/api/components/checkbox/Checkbox/ – Islam

嗨@Islam我想知道你如何能夠使離子 - 選擇組件打開自定義彈出窗口而不是使用選項值的alert/popover？ – Mario

Ionic2離子選擇與搜索欄

回答

相關問題