mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00

BREAKING CHANGES: The Option component’s `checked` attribute has been renamed to `selected` in order to select an option. This is to the follow the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute. references #7334
73 lines
1.4 KiB
TypeScript
73 lines
1.4 KiB
TypeScript
import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
|
|
|
|
import { isPresent, isTrueProperty } from '../../util/util';
|
|
|
|
/**
|
|
* @name Option
|
|
* @description
|
|
* `ion-option` is a child component of `ion-select`. Similar to the native option element, `ion-option` can take a value and a selected property.
|
|
*
|
|
* @demo /docs/v2/demos/item-sliding/
|
|
*/
|
|
@Directive({
|
|
selector: 'ion-option'
|
|
})
|
|
export class Option {
|
|
private _selected: any = false;
|
|
private _disabled: any = false;
|
|
private _value: any;
|
|
|
|
/**
|
|
* @input {any} Event to evaluate when option is selected
|
|
*/
|
|
@Output() ionSelect: EventEmitter<any> = new EventEmitter();
|
|
|
|
constructor(private _elementRef: ElementRef) {}
|
|
|
|
/**
|
|
* @input {boolean} Whether or not the option is already selected
|
|
*/
|
|
@Input()
|
|
get selected() {
|
|
return this._selected;
|
|
}
|
|
|
|
set selected(val) {
|
|
this._selected = isTrueProperty(val);
|
|
}
|
|
|
|
/**
|
|
* @input {any} The value of the option
|
|
*/
|
|
@Input()
|
|
get value() {
|
|
if (isPresent(this._value)) {
|
|
return this._value;
|
|
}
|
|
return this.text;
|
|
}
|
|
|
|
set value(val: any) {
|
|
this._value = val;
|
|
}
|
|
|
|
/**
|
|
* @input {boolean} Whether or not the option is disabled
|
|
*/
|
|
@Input()
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
|
|
set disabled(val) {
|
|
this._disabled = isTrueProperty(val);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
get text() {
|
|
return this._elementRef.nativeElement.textContent;
|
|
}
|
|
}
|