\$\begingroup\$

I have created a script for going a multiple select option in Angular without using a select box that you have to hold control in order to select multiple items.

Demo: http://jsfiddle.net/qwertynl/xfw9f/

Code on GitHub

Here is my code:

Javascript:

var switcharoo = angular.module('switcharoo', []).directive('multiSelect', function(){ return { restrict: 'E', scope: { items: '=', default: '=', leftTitle: '@', rightTitle: '@' }, templateUrl: "switcharoo.html", link: function(scope) { scope.switchItem = function(item) { var index = scope.default.indexOf(item); if(index == -1) { //add it in scope.default.push(item); } else { //remove it scope.default.splice(index, 1); } } } }; }) switcharoo.directive('switchitem', function() { return { restrict: 'E', scope: { value: '=' }, template: '<div>{{value}}</div>' }; });

HTML Template:

<style> .switchBox .entBox { overflow:auto;height:8em; width:190px;border:1px solid black;float:left; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .switchBox .entBox div:hover { background-color: #908f8f; } .switchBox .eBox2.entBox { background-color: #ccc9c9; } </style> <label> <table> <tr> <th>{{leftTitle}}</th> <th>{{rightTitle}}</th> </tr> <tr class="switchBox"> <td> <div class="entBox eBox1"> <switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) == -1" value="value" ng-click="switchItem(key)"></switchitem> </div> </td> <td> <div class="entBox eBox2"> <switchitem ng-repeat="(key, value) in items" ng-if="default.indexOf(key) > -1" value="value" ng-click="switchItem(key)"></switchitem> </div> </td> </tr> </table> </label>

Is there anything I can do to make my code slicker?