ngMultiSelect

Select multiple items in select list.

by Jordy Verstraete

HTML

<div ng-app="multiselect">
	<div class="a">
		<multiselect></multiselect>
	</div>
	<div class="a">
		<multiselect></multiselect>
	</div>
	<div class="a">
		<multiselect></multiselect>
	</div>
</div>

CSS

body { font-family: Arial, 'Sans-serif'}

select { width: 100%; padding: 5px; height: 150px;}
input { width: 100%; padding: 5px 0; margin-bottom: 10px;}

.a {
	width: 32%;
	float: left;
	margin: 5px;
}

JavaScript

console.clear();
angular
.module("multiselect", [])
.directive("multiselect", [function() {
	return {
  	scope: {},
    template: 	'<div>' +
    						'		<input type="text" data-ng-model="filter" placeholder="Filter..."/>' +
    						'		<select multiple="multiple" data-ng-model="selection" data-ng-options="item.value as item.label for item in items | filter: filter"/>' +
                '</div>',
    link: function(scope, elem, attr) {
    	scope.selection = [];
    	scope.items = [
      	{ label: 'Item 1', value: 1 },
        { label: 'Item 2', value: 2 },
        { label: 'Item 3', value: 3 },
        { label: 'Item 4', value: 4 },
        { label: 'Item 5', value: 5 },
      ];
  	}
  }
}]);