如何避免确定/取消离子选项/离子选择

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