AngularJS moving items between two select list

angularjs

Solution

There are several small problems in your template:

- You're moving objects from `availableclients` to `selectedclients`, but the first select displays options from `clientsList`, and not from `availableclients`

You're moving IDs rather than objects. Your ng-options should simply be

client as client.name for client in availableclients

Your remove all button moves from available to selected, instead of moving from selected to available.

Here is a working plunkr: http://plnkr.co/edit/RYEmpkBjQStoCfgpWPEK?p=preview

<label for="aclients">Available Clients</label>                                
<select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 400px"></select>         

<input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" />
<input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" />
<input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" />    
<input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(selectedclients,availableclients)" />

<label for="sclients">Selected Clients</label>                                                    
<select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 400px"></select>

Problem

I am trying to move items between two select lists using the code below, but items are not moved from the availableClients list to selectedClients lists, so can someone please check the code below and let me know what I am missing here? Thanks ``` <div ng-app> <div ng-controller="testCtrl"> <label for="aclients">Available Clients</label> <select size="5" multiple ng-model="available" ng-options="client.id as client.Name for client in clientsList" style="width: 400px"></select> <input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" /> <input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" /> <input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" /> <input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(availableclients,selectedclients)" /> <label for="sclients">Selected Clients</label> <select size="5" multiple ng-model="selected" ng-options="client.id as client.Name for client in selectedclients" style="width: 400px"></select> <div>Selected Clients IDs: {{selectedclients}}</div> </div> </div> ``` Controller: ``` app.controller('testCtrl', function testCtrl($scope, clientsService){ $scope.clientsList = clientsService.getClientsList().then( function(response){ $scope.clientsList = response; }, function(status){ console.log(status); } ); $scope.moveItem = function(item, from, to) { console.log('Move item Item: '+item+' From:: '+from+' To:: '+to); //Here from is returned as blank and to as undefined var idx=from.indexOf(item); if (idx != -1) { from.splice(idx, 1); to.push(item); } }; $scope.moveAll = function(from, to) { console.log('Move all From:: '+from+' To:: '+to); //Here from is returned as blank and to as undefined angular.forEach(from, function(item) { to.push(item); }); from.length = 0; }; $scope.availableclients = []; $scope.selectedclients = []; }); ```

Original source