diff --git a/index.html b/index.html index 5c962af1..d7061ddb 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@
Selection: {{test.selection}} + selector="'name'" label="Test selector" null-option="None"> Header diff --git a/source/components/select/select.ts b/source/components/select/select.ts index 167f150a..2de7a585 100644 --- a/source/components/select/select.ts +++ b/source/components/select/select.ts @@ -10,6 +10,7 @@ import * as _ from 'lodash'; import { services } from 'typescript-angular-utilities'; import __validation = services.validation; +import __object = services.object; import { IComponentValidator, @@ -30,24 +31,34 @@ export class SelectController { validator: __validation.IValidationHandler; label: string; ngDisabled: boolean; + nullOption: string; ngModel: angular.INgModelController; selectValidator: IComponentValidator; loading: boolean; + private _nullOption: any = { + __isNullOption: true, + }; + get selection(): any { return this.ngModel.$viewValue; } set selection(value: any) { - this.ngModel.$setViewValue(value); + if (value.__isNullOption) { + this.ngModel.$setViewValue(null); + } else { + this.ngModel.$setViewValue(value); + } } - static $inject: string[] = ['$element', '$scope', '$q', componentValidatorFactoryName]; + static $inject: string[] = ['$element', '$scope', '$q', componentValidatorFactoryName, __object.serviceName]; constructor($element: angular.IAugmentedJQuery , $scope: angular.IScope , private $q: angular.IQService - , componentValidatorFactory: IComponentValidatorFactory) { + , componentValidatorFactory: IComponentValidatorFactory + , private object: __object.IObjectUtility) { this.ngModel = $element.controller('ngModel'); if (_.isUndefined(this.options)) { @@ -56,6 +67,8 @@ export class SelectController { this.options = options; this.loading = false; }); + } else { + this.options = this.configureOptions(this.options); } if (!_.isUndefined(this.validator)) { @@ -72,17 +85,31 @@ export class SelectController { return null; } + if (item.__isNullOption) { + return this.nullOption; + } + return _.isFunction(this.selector) ? (<{ (item: any): string }>this.selector)(item) : item[this.selector]; } loadItems(): angular.IPromise { + let promise: angular.IPromise; if (_.isFunction(this.getOptions)) { - return this.getOptions(); + promise = this.getOptions(); } else { - return this.$q.when(this.options); + promise = this.$q.when(this.options); } + return promise.then((options: any[]): any[] => { return this.configureOptions(options); }); + } + + configureOptions(options: any[]): any[] { + if (!this.object.isNullOrWhitespace(this.nullOption)) { + options.unshift(this._nullOption); + } + + return options; } } @@ -101,6 +128,7 @@ export function select(): angular.IDirective { validator: '=', label: '@', ngDisabled: '=', + nullOption: '@', }, }; } diff --git a/source/components/spinner/spinner.ts b/source/components/spinner/spinner.ts index 523abc75..86e1dc57 100644 --- a/source/components/spinner/spinner.ts +++ b/source/components/spinner/spinner.ts @@ -169,6 +169,6 @@ function spinner($timeout: angular.ITimeoutService }; } -angular.module(moduleName, [__string.moduleName, componentValidatorModuleName]) +angular.module(moduleName, [__string.moduleName, componentValidatorModuleName, __number.moduleName]) .directive(directiveName, spinner) .controller(controllerName, SpinnerController);