如何避免確定/取消離子選項/離子選擇

Question

嗨按鈕如何避免OK和離子選擇取消按鈕？

點擊離子選項後，我需要一個輸出作爲下面的圖像。

我嘗試了所有選項，按照http://ionicframework.com/docs/v2/api/components/select/Select/。

但我不能夠實現這個UI。

即使輸入interface="action-sheet"我也無法達到想要的效果。

我在哪裏可以找到演示或任何幫助來獲得這一觀點？

Answer 1

這個問題其實是我自己需要的，我知道有些人需要一段時間。所以，我希望這有助於..

選項1：裹SUPER COMPONENT

首先，我們要創建一個名爲選擇-alertless組件。 這裏是有選擇的HTML：

<ion-select [(ngModel)]="model" #select> 
    <ion-option *ngFor="let option options" [value]="option.id">{{option.name}}</ion-option> 
</ion-select> 

一個鏈接視圖孩子真的很簡單。

現在SCSS隱藏確定/取消按鈕：

.select-alertless{ 
    .alert-button-group{ 
     display:none; 
     } 
    } 

實際的元件類，查找套在HTML中的選擇。查找選項，並設置在點擊一個發光。因此，每次有人點擊的選項，它之一。 open函數只是這裏解僱你點擊後的警報。

@Component({ 
    templateUrl: 'select-alertless.html', 
    selector: 'select-alertless', 
}) 
export class select_alertless { 
    // the options that are displayed 
    @Input('options') public options: any[]; 
    @Input('model') public model: any; 

    // the event that is to be emitted when changes occures 
    @Output('change') public change: EventEmitter<any> = new EventEmitter<any>(); 

    // The sets here capture events and emit the data to change when its needed. It also switched the open function for our own open function so then the viewcontroller can be closed. 
    @ViewChild('select') public set ex(select: any | undefined) { 
     if (select === undefined) return; 
     select.open = this.open; 
     if (select._options === undefined) { 
      Object.defineProperty(select, '_options', { 
       set: (val) => { 
        select['__options'] = val; 
        val.forEach(option => option.ionSelect.subscribe(d => { 
         this.change.emit(d); 
         this.model = d; 

         select.overlay.dismiss(); 
        })); 
       }, 
       get: function() { return select['__options'] } 
      }) 
     } 
    } 
    open() { 
     if ((<any>this)._disabled) { 
      return; 
     } 

     console.debug('select, open alert'); 

     // the user may have assigned some options specifically for the alert 
     const selectOptions = deepCopy((<any>this).selectOptions); 

     // make sure their buttons array is removed from the options 
     // and we create a new array for the alert's two buttons 
     selectOptions.buttons = [{ 
      text: (<any>this).cancelText, 
      role: 'cancel', 
      handler:() => { 
       (<any>this).ionCancel.emit(null); 
      } 
     }]; 

     // if the selectOptions didn't provide a title then use the label's text 
     if (!selectOptions.title && (<any>this)._item) { 
      selectOptions.title = (<any>this)._item.getLabelText(); 
     } 

     let options = (<any>this)._options.toArray(); 


     // default to use the alert interface 
     (<any>this).interface = 'alert'; 

     // user cannot provide inputs from selectOptions 
     // alert inputs must be created by ionic from ion-options 
     selectOptions.inputs = (<any>this)._options.map(input => { 
      return { 
       type: ((<any>this)._multi ? 'checkbox' : 'radio'), 
       label: input.text, 
       value: input.value, 
       checked: input.selected, 
       disabled: input.disabled, 
       handler: (selectedOption: any) => { 
        // Only emit the select event if it is being checked 
        // For multi selects this won't emit when unchecking 
        if (selectedOption.checked) { 
         input.ionSelect.emit(input.value); 
        } 
       } 
      }; 
     }); 

     var selectCssClass = 'select-alert'; 

     // create the alert instance from our built up selectOptions 
     (<any>this).overlay = new Alert((<any>(<any>this))._app, selectOptions); 

     if ((<any>this)._multi) { 
      // use checkboxes 
      selectCssClass += ' multiple-select-alert select-alertless'; 
     } else { 
      // use radio buttons 
      selectCssClass += ' single-select-alert select-alertless'; 
     } 

     // If the user passed a cssClass for the select, add it 
     selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : ''; 
     (<any>this).overlay.setCssClass(selectCssClass); 

     (<any>this).overlay.addButton({ 
      text: (<any>this).okText, 
      handler: (selectedValues: any) => { 
       (<any>this).onChange(selectedValues); 
       (<any>this).ionChange.emit(selectedValues); 
      } 
     }); 


     (<any>this).overlay.present(selectOptions); 

     (<any>this)._isOpen = true; 
     (<any>this).overlay.onDidDismiss(() => { 
      (<any>this)._isOpen = false; 
     }); 
    } 
} 

這個答案就已經短了很多，如果在選擇已創建的警報是公開的，而不是一個局部變量。

添加到您的應用程序模塊，你可以自由使用它。 下面是一個例子：

<ion-item> 
      <ion-label>stuff</ion-label> 
      <select-alertless [model]="data" item-content [options]="options" (change)="data = $event"></select-alertless> 
</ion-item> 

可以添加被傳遞到離子選擇爲具有多個配置多個輸入。

選項2：擴展選擇本身

這將是一個更好的解決方案，因爲它可以讓你只寫成分，如選擇離子選擇只能選擇-alertless

import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 

import { ActionSheet, Alert, App, Config, Form, Ion, Item, NavController, Option, ViewController } from 'ionic-angular'; 
import { isBlank, isCheckedProperty, isTrueProperty, deepCopy } from 'ionic-angular/util/util'; 
import { Select as ImportSelect } from 'ionic-angular/components/select/select'; 


export class TempSelect extends ImportSelect { 
    static decorators = undefined; 
    // static propDecorators = undefined; 
} 

export const SELECT_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => Select), 
    multi: true 
}; 

@Component({ 
    selector: 'select-alertless', 
    styles: ['.select-alertless .alert-button-group{display:none}'], 
    template: 
'<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' + 
'<div *ngIf="_text" class="select-text">{{selectedText || _text}}</div>' + 
'<div class="select-icon">' + 
'<div class="select-icon-inner"></div>' + 
'</div>' + 
'<button aria-haspopup="true" ' + 
'[id]="id" ' + 
'ion-button="item-cover" ' + 
'[attr.aria-labelledby]="_labelId" ' + 
'[attr.aria-disabled]="_disabled" ' + 
'class="item-cover">' + 
'</button>', 
host: { 
     '[class.select-disabled]': '_disabled' 
    }, 
    providers: [SELECT_VALUE_ACCESSOR], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class Select extends TempSelect implements AfterContentInit, ControlValueAccessor, OnDestroy { 
    public overlay: Alert; 
    private __options: any; 
    constructor(
     _app: App, 
     _form: Form, 
     config: Config, 
     elementRef: ElementRef, 
     renderer: Renderer, 
     @Optional() public _item: Item, 
     @Optional() _nav: NavController 
    ) { 
     super(_app, _form, config, elementRef, renderer, _item, _nav); 
     this.setElementClass(`${this._componentName}-${this._mode}`, false); 
    } 
public set _options(val) { 
    this.__options = val; 
    if (!this._multi) { 
     this.__options.forEach(option => { 
      option.ionSelect.subscribe(selectedValues => { 
       this.onChange(selectedValues); 
       this.ionChange.emit(selectedValues); 
       this._isOpen = false; 
       this.overlay.dismiss(); 
      }); 
     }); 
    } 
} 
public get _options() { 
    return this.__options; 
} 
open() { 
    if (this._disabled) { 
     return; 
    } 

    // the user may have assigned some options specifically for the alert 
    const selectOptions = deepCopy(this.selectOptions); 

    // make sure their buttons array is removed from the options 
    // and we create a new array for the alert's two buttons 
    selectOptions.buttons = [{ 
     text: this.cancelText, 
     role: 'cancel', 
     handler:() => { 
      this.ionCancel.emit(null); 
     } 
    }]; 

    // if the selectOptions didn't provide a title then use the label's text 
    if (!selectOptions.title && this._item) { 
     selectOptions.title = this._item.getLabelText(); 
    } 

    let options = this._options.toArray(); 


    // default to use the alert interface 
    this.interface = 'alert'; 

    // user cannot provide inputs from selectOptions 
    // alert inputs must be created by ionic from ion-options 
    selectOptions.inputs = this._options.map(input => { 
     return { 
      type: (this._multi ? 'checkbox' : 'radio'), 
      label: input.text, 
      value: input.value, 
      checked: input.selected, 
      disabled: input.disabled, 
      handler: (selectedOption: any) => { 
       // Only emit the select event if it is being checked 
       // For multi selects this won't emit when unchecking 
       if (selectedOption.checked) { 
        input.ionSelect.emit(input.value); 
       } 
      } 
     }; 
    }); 

    var selectCssClass = 'select-alert'; 

    // create the alert instance from our built up selectOptions 
    this.overlay = new Alert((<any>this)._app, selectOptions); 

    if (this._multi) { 
     // use checkboxes 
     selectCssClass += ' multiple-select-alert'; 
    } else { 
     // use radio buttons 
     selectCssClass += ' single-select-alert select-alertless'; 
    } 

    // If the user passed a cssClass for the select, add it 
    selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : ''; 
    this.overlay.setCssClass(selectCssClass); 

    this.overlay.addButton({ 
     text: this.okText, 
     handler: (selectedValues: any) => { 
      this.onChange(selectedValues); 
      this.ionChange.emit(selectedValues); 
     } 
    }); 


    this.overlay.present(selectOptions); 

    this._isOpen = true; 
    this.overlay.onDidDismiss(() => { 
     this._isOpen = false; 
    }); 
} 

}

使用像：

<select-alertless item-content [(ngModel)]="data"><ion-option></ion-option></select-alertless> 

基本上使用像正常的選擇

欲瞭解更多信息，以及如何使用它諮詢本GitHub上的示例項目： https://github.com/misha130/ionic2-select-nobuttons