<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="angular-multipleselect.min.js"></script>
</head>
<body ng-app="app" ng-controller="main">
<div style="width:50%;display:inline-block">
<multi-select ms-model="model" ms-options="options" ms-change="Change"></multi-select>
</div>
<div style="width:49%;display:inline-block">
<div>Change: {{change}}</div>
<div>Model: {{model}}</div>
</div>
</body>
</html>
// Code goes here
angular.module("app",['multiSelect'])
.controller("main",function($scope) {
$scope.options = ["Banana", "Orange", "Apple", "Mango", "Peach", "Watermelon", "Pineapple", "Tangerine", "Grape", "Cantelope", "Strawberry", "Raspberry"];
$scope.Change = function(change) {
$scope.change = change;
}
})
/* Styles go here */
angular.module("multiSelect",[]).directive("multiSelect",function(){return{restrict:"E",scope:{model:"=msModel",Change:"=msChange",options:"=msOptions",settings:"@settings"},templateUrl:"multi-select-tpl.html",link:function(e,o,t){e.model&&Array.isArray(e.model)||(e.model=[]),e.showOptions=!1,e.Display=function(e){return e},e.Add=function(o){o&&(e.action=!0,e.model.push(o),e.search="",e.Change({event:"add",value:o}))},e.Remove=function(o,t){o&&(e.model.splice(e.model.indexOf(o),1),e.Change({event:"remove",value:o}),t&&t.stopPropagation())},e.Show=function(o){return e.model.indexOf(o)<0},e.FocusSearch=function(){o[0].getElementsByClassName("ms-search")[0].focus(),e.ShowOptions(!0)},e.ShowOptions=function(o){null==o?!e.showOptions:o,e.showOptions=o,e.selected=0},e.HideOptions=function(){return e.action?(e.FocusSearch(),void(e.action=!1)):void(e.showOptions=!1)},e.Select=function(o){e.selected=o},e.Key=function(o){if(o.key)switch(o.key){case"Enter":if(e.shown.length<0)break;e.Add(e.shown[e.selected]),e.selected=0,e.action=!1;break;case"ArrowDown":e.selected++,e.selected%=e.shown.length;break;case"ArrowUp":e.selected--,e.selected+=e.shown.length,e.selected%=e.shown.length;break;case"Backspace":e.search||e.Remove(e.model[e.model.length-1])}}}}}).run(["$templateCache",function(e){e.put("multi-select-tpl.html",'<div> <style> .ms-main { min-height: 50px; position: relative } .ms-input { outline: none; border-radius: 4px; border: 1px solid #a7a7a7; padding: 2px 34px 4px 4px; } .ms-options { position: absolute; left: 0; margin-top: -3px; right: 0; background-color: white; border: 1px solid #b7b7b7; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; max-height: 200px; overflow-y: scroll; } .ms-option { padding: 5px 15px; } .ms-search { outline: none; border: none; font-size: 13px; padding: 7px; width: 30px; } .ms-caret { position: absolute; right: 18px; cursor: pointer; top: 10px; margin-top: 6px; margin-right: -8px; color: gray; } .ms-caret:hover { opacity: 0.8 } .ms-item { margin: 3px; background-color: #dbe3f7; border: 1px solid #9ba8ce; border-radius: 3px; display: inline-block; } .ms-item-remove { cursor: pointer; color: #505050; border-left: 1px solid #9ba8ce; vertical-align: middle; display: inline-block; padding: 0px 5px 2px 5px; } .ms-item-remove:hover { background-color: #cdd7f4 } .ms-item-label { padding: 0px 1px 0px 5px; vertical-align: middle; font-size: 15px; } .arrow-down { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid; } .selected { background-color: aliceblue; } </style> <div class="ms-main"> <div ng-click="FocusSearch()" class="ms-input"> <div class="ms-item" ng-repeat="item in model"> <span class="ms-item-label">{{Display(item)}}</span> <span class="ms-item-remove" ng-click="Remove(item,$event)">×</span> </div> <input ng-keyup="Key($event)" ng-blur="HideOptions()" class="ms-search" ng-model="search"> <span ng-click="ShowOptions()" class="ms-caret arrow-down"></span> </div> <div ng-show="showOptions" class="ms-options"> <div ng-mouseover="Select($index)" ng-mousedown="Add(option)" ng-class="{\'selected\':selected===$index}" class="ms-option" ng-repeat="option in (shown = (options | filter:Show | filter:search))">{{Display(option)}}</div> <div class="ms-option" ng-show="shown.length == 0">No Matches</div> </div> </div></div>')}]);