JSFiddle - React, Tailwind, and code Playground
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.name 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, selectedItems, availableItems)">
Move sel -->
</button>
<button ng-click="moveItem(available, 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>
JavaScript
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
Array.prototype.removeItem = function(item){
var idx = this.indexOf(item);
alert(idx);
this.remove(idx);
};
Array.prototype.sortAlpha = function(){
$(this).sort(function(a, b) {
if (a < b) return -1;
if (a == b) return 0;
return 1;
});
};
function fling($scope) {
$scope.selectedItems = [{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"}];
$scope.availableItems = [];
$scope.moveItem = function(itemsToMove, sourceList, targetList) {
alert(itemsToMove);
$(itemsToMove).each(function(){
sourceList.removeItem(this.toString());
targetList.push(itemsToMove);
});
targetList.sort();
itemsToMove.length = 0;
};
$scope.moveAll = function(sourceList, targetList) {
$(sourceList).each(function(){
targetList.push(this.toString());
});
targetList.sort();
sourceList.length = 0;
};
}