JSFiddle - React, Tailwind, and code Playground

by grendian

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<section ng-app="AngApp" ng-controller="AngAppCtrl">
  <table>
   <tr>
    <td><select size="8" ng-model="site" ng-options="s.title for s in sites" ng-change="test()"></select></td>
       <td class="spacer"></td>
    <td><select size="8" ng-model="assignSelect"/></td>
       <td class="spacer">
           <input type="button" value="< add <" ng-click="assign()"/>
           <input type="button" value="> rm >" ng-click="unassign()"/>
       </td>
    <td><select size="8" ng-model="unassignSelect" ng-options="u.name for u in unassigned"/></td>
   </tr>
  </table>
    <span>Site: {{site.title}}</span><br/>
    <span>Assigned: {{assignSelect.name}}</span><br/>
    <span>Unassigned: {{unassignSelect.name}}</span><br/>
</section>

CSS

table, select { width: 100%; }
td { width: 25%; }
.spacer { width: 12%; }
.spacer input { margin: 15px auto; display:block; width:50px; }

JavaScript

var AngApp = angular.module('AngApp', []);

AngApp.controller('AngAppCtrl', function AngAppCtrl( $scope ){
 $scope.sites = [
  { id: 1, title: 'Site 1' },
  { id: 2, title: 'Site 2' },
  { id: 3, title: 'Site 3' },
  { id: 4, title: 'Site 4' }
 ];
 var allUsers = [
     { id: 1, name: 'User 1' },
     { id: 2, name: 'User 2' },
     { id: 3, name: 'User 3' }
 ];
    $scope.unassigned = allUsers;
    $scope.assignments = {};
    $scope.sites.forEach(function(s){ $scope.assignments[s.id] = []; });
    $scope.site = $scope.sites[0];
    $scope.assignSelect = undefined;
    $scope.unassignSelect = $scope.unassigned[0];
    $scope.assign = function(){
        $scope.assignments[$scope.site.id].push($scope.unassignSelect);
        //$scope.unassigned.splice($index,1);
    }
});