mbildner · March 16, 2014 03:26
diff --git a/custom-selector.html b/custom-selector.html
 <html ng-app="app">
 <head>
 	<title>ng dropdown</title>

 	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link> -->
 	<style>
 	mb-select {
 		display: block;
 		background-color: lime;
 		width: 40px;
 		position: absolute;
 		outline-width: 2px;
 		outline-color: black;
 		outline-style: solid;

 	}

 	mb-select .option {
 		background-color: grey;
 		width: 40px;
 	}

 	mb-select .option:hover {
 		background-color: red;
 	}

 	</style>

 </head>

 <body>
 	<div ng-controller="TestCtrl">

 		<mb-select
 			default="moshe"
 			options="demoSelectOptions"
 			display="name"
 			ng-model="selectDemo"
 		></mb-select>

 		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
 		<script>
 			var selectTemplate = [
 				'<div ng-click="toggleDisplayOpened()" ng-keydown="traverseOptions($event)" tabindex="1">',
 					'<div>{{selectedOption | selectDisplayFilter:display }}</div>',
 					'<div',
 					'display="value"',
 					'ng-model="selectDemo"',
 					'options=options',
 					'ng-click="selectOption(option)"',
 					'ng-show="displayOpened"',
 					'class="option"',
 					'>',
 						'{{option | selectDisplayFilter:display }}',
 					'</div>',
 				'</div>'
 			].join('\n');
 		</script>

 		<script>
 		var app = angular.module('app', []);

 		app.filter('selectDisplayFilter', function () {
 			return function (selectObject, displayProperty) {
 				var displayValue = selectObject[displayProperty];
 				return displayValue;
 			}
 		});

 		app.controller('TestCtrl', function ($scope) {
 			$scope.demoSelectOptions = [
 				{name: 'moshe', age: 24},
 				{name: 'luke', age: 22},
 				{name: 'adam', age: 23},
 				{name: 'gery', age: 22},
 				{name: 'noah', age: 25}
 			];

 		});

 		app.directive('mbSelect', function ($compile) {
 			return {
 				restrict: 'E',
 				template: selectTemplate,
 				require: ['^ngModel'],
 				compile: function (tElement, tAttrs) {
 					// add repeater directive to the div holding our options
 					tElement.find('div')[2].setAttribute('ng-repeat', 'option in options');

 					return {
 						post: function postLink (scope, element, attrs) {
 							scope.selectOption = selectOption;

 							// set default initial value
 							scope.selectedOption =  scope.defaultSelection || scope.options[0];

 							scope.toggleDisplayOpened = toggleDisplayOpened;

 							if (scope.defaultSelection) {
 								scope.ngModel = scope.defaultSelection;
 							}

 							scope.traverseOptions = traverseOptions;

 							function traverseOptions (event) {
 								if (event.which==38) {
 									console.log('up pressed');
 								} else if (event.which==40) {
 									console.log('down pressed');
 								}
 							}

 							function selectOption (option) {
 								scope.selectedOption = option;
 							}

 							function toggleDisplayOpened () {
 								scope.displayOpened = !scope.displayOpened;
 							}

 						}
 					}
 				},

 				scope: {
 					options: '=options',
 					defaultSelection: '=default',
 					repeater: '@ngRepeat',
 					display: '@display',
 				}
 			}
 		});

 		</script>

 	</div>
 </body>
 </html>
	<html ng-app="app">
	<head>
	<title>ng dropdown</title>

	<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link> -->
	<style>
	mb-select {
	display: block;
	background-color: lime;
	width: 40px;
	position: absolute;
	outline-width: 2px;
	outline-color: black;
	outline-style: solid;

	}

	mb-select .option {
	background-color: grey;
	width: 40px;
	}

	mb-select .option:hover {
	background-color: red;
	}

	</style>

	</head>

	<body>
	<div ng-controller="TestCtrl">

	<mb-select
	default="moshe"
	options="demoSelectOptions"
	display="name"
	ng-model="selectDemo"
	></mb-select>

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
	<script>
	var selectTemplate = [
	'<div ng-click="toggleDisplayOpened()" ng-keydown="traverseOptions($event)" tabindex="1">',
	'<div>{{selectedOption \| selectDisplayFilter:display }}</div>',
	'<div',
	'display="value"',
	'ng-model="selectDemo"',
	'options=options',
	'ng-click="selectOption(option)"',
	'ng-show="displayOpened"',
	'class="option"',
	'>',
	'{{option \| selectDisplayFilter:display }}',
	'</div>',
	'</div>'
	].join('\n');
	</script>

	<script>
	var app = angular.module('app', []);

	app.filter('selectDisplayFilter', function () {
	return function (selectObject, displayProperty) {
	var displayValue = selectObject[displayProperty];
	return displayValue;
	}
	});

	app.controller('TestCtrl', function ($scope) {
	$scope.demoSelectOptions = [
	{name: 'moshe', age: 24},
	{name: 'luke', age: 22},
	{name: 'adam', age: 23},
	{name: 'gery', age: 22},
	{name: 'noah', age: 25}
	];

	});

	app.directive('mbSelect', function ($compile) {
	return {
	restrict: 'E',
	template: selectTemplate,
	require: ['^ngModel'],
	compile: function (tElement, tAttrs) {
	// add repeater directive to the div holding our options
	tElement.find('div')[2].setAttribute('ng-repeat', 'option in options');

	return {
	post: function postLink (scope, element, attrs) {
	scope.selectOption = selectOption;

	// set default initial value
	scope.selectedOption = scope.defaultSelection \|\| scope.options[0];

	scope.toggleDisplayOpened = toggleDisplayOpened;

	if (scope.defaultSelection) {
	scope.ngModel = scope.defaultSelection;
	}

	scope.traverseOptions = traverseOptions;

	function traverseOptions (event) {
	if (event.which==38) {
	console.log('up pressed');
	} else if (event.which==40) {
	console.log('down pressed');
	}
	}

	function selectOption (option) {
	scope.selectedOption = option;
	}

	function toggleDisplayOpened () {
	scope.displayOpened = !scope.displayOpened;
	}

	}
	}
	},

	scope: {
	options: '=options',
	defaultSelection: '=default',
	repeater: '@ngRepeat',
	display: '@display',
	}
	}
	});

	</script>

	</div>
	</body>
	</html>