JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<div ng-app>
<div ng-controller="fling">
<select multiple="true" ng-model="selected" ng-options="item for item in selectedItems">
</select>
<--->
<select  multiple="true" ng-model="available" ng-options="item for item in availableItems">
</select>
    <br />
<button ng-click="moveItem(selected[0], selectedItems, availableItems)">
    Move sel -->
</button>
<button ng-click="moveItem(available[0], availableItems, selectedItems)"> 
    <-- Move sel
</button>
    <br />
<button ng-click="moveAll(selectedItems, availableItems)">
    Move all --> 
</button>
<button ng-click="moveAll(availableItems, selectedItems)">
     <-- Move all
</button>
    {{selectedItems}}
    {{availableItems}}
    
</div>
</div>

CSS

select{width:100px;}

JavaScript

function fling($scope) {

    $scope.moveItem = function(item, from, to) {
        
        var idx=from.indexOf(item);
        if (idx != -1) {
            from.splice(idx, 1);
            to.push(item);      
        }
    };
    $scope.moveAll = function(from, to) {
        angular.forEach(from, function(item) {
            to.push(item);
        });
        from.length = 0;
    };
    
    $scope.selectedItems = ['a','b','c'];
    $scope.availableItems = [1,2,3];
}