JSFiddle - React, Tailwind, and code Playground

by Michael Hunziker

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<!doctype html>
<html>
    <head></head>
<body ng-controller="MyCtrl">
    <shuttle-boxes items="itemList" ng-model="myModel"></shuttle-boxes>
    myModel={{myModel}}
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function MyCtrl($scope) {
    $scope.itemList = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8', 'Option 9', 'Option 10'];
    $scope.myModel = [];
}

myApp.directive('shuttleBoxes', function($timeout) {
    return {
        restrict: 'E',
        scope: { items: '=', ngModel: '='},
        template: '<div class="shuttle-boxes">' +
            '<select multiple="multiple" class="shuttle-boxes-left" ng-options="item for item in items" ng-model="ngModel"></select>' +
            '<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-right"></i></button>' +
            '<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-left"></i></button>' +
            '<select multiple="multiple" class="shuttle-boxes-right"></select>' +
            '</div>',
        replace: true,
    }
});