AngularJS elementi in movimento tra due selezionare l'elenco

Question

Sto cercando di spostare gli elementi tra due elenchi di selezione utilizzando il codice riportato di seguito, ma gli elementi non vengono spostati dall'elenco dei client disponibili agli elenchi dei clienti selezionati, quindi qualcuno può controllare il codice qui sotto e fammi sapere cosa mi manca qui? Grazie

<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 1

Ci sono diversi piccoli problemi nel modello:

• Stai oggetti in movimento da availableclients a selectedclients, ma i primi visualizza selezionare le opzioni da clientsList , e non da availableclients

• Stai spostando gli ID anziché gli oggetti. I vostri NG-opzioni dovrebbero essere semplicemente

  client as client.name for client in availableclients 
  

• tuo pulsante Rimuovi tutti si sposta dalla disposizione a scelta, invece di muoversi da selezionato a disposizione.

Ecco un plunkr di lavoro: 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> 

Answer 2

Per quanto riguarda il mio commento/domanda. In realtà ho trovato una risposta. Quindi per quelli che vengono qui e hanno lo stesso problema, ecco quello che ho trovato.

Quando si sposta un elemento da un elenco SELECT a un altro elenco SELECT, il modello angolare nell'elenco sorgente può essere "perso". Per evitare questo, la modifica di ogni elenco deve essere eseguita in una chiamata di funzione $ apply separata. Qui è un taglio verso il basso ad esempio dall'interno nel gestore di eventi

onClickRight = function (item, from, to) { 
    var self = this; 
    var selecteditem = angular.copy(item); 
    self.$timeout(function() { 
     self.scope.$apply(function() {     
      for (var idx = 0; idx < from.length; idx++) { 
       if (from[idx].value == item.value && from[idx].displayValue == item.displayValue) { 
        item.length = 0; 
        from.splice(idx, 1); 
        break; 
       }   
       }; 
      }); 
     }, 200); 
     self.$timeout(function() { 
      self.scope.$apply(function() { 
       to.push(selecteditem); 
      }); 
     }, 300); 
    }; 

La 'voce' è clonato con angular.copy in modo che possa essere utilizzato nel secondo angolare $ applicare mie opzioni hanno un 2 proprietà: valore e la displayValue Assegnare anche $ timeout e $ scope alla variabile 'self' nel costruttore della direttiva. Spero che questo aiuti