Allow null option

index.html

@@ -21,7 +21,7 @@
 			<div ng-controller="TestController as test">
 				Selection: {{test.selection}}
 				<rl-select ng-model="test.selection" options="test.options" option-as="item"
-						   selector="'name'" label="Test selector"></rl-select>
+						   selector="'name'" label="Test selector" null-option="None"></rl-select>
 				<rl-tabset>
 					<rl-tab>
 						<rl-tab-header>Header</rl-tab-header>

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[<string>this.selector];
 	}
 
 	loadItems(): angular.IPromise<any[]> {
+		let promise: angular.IPromise<any[]>;
 		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: '@',
 		},
 	};
 }

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);