MChan MChan - 5 months ago 397
AngularJS Question

AngularJS moving items between two select list

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 = [];


});

Answer

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>