AngularJS在兩個選擇列表之間移動項目

我想使用下面的代碼在兩個選擇列表之間移動項目，但項目不會從可用客戶端列表移動到selectedClients列表，因此有人可以檢查下面的代碼並讓我知道我在這裏錯過了什麼？由於AngularJS在兩個選擇列表之間移動項目

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

控制器：

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


    });

來源

2014-07-03 MChan

有模板中的幾個小問題：

你從availableclients移動物體selectedclients，但是從clientsList第一選擇顯示器選項，而不是從availableclients
您正在移動ID而不是對象。你NG選項應該簡單地而不是移動從選擇到使用
```
client as client.name for client in availableclients 
```
你remove從所有可用按鈕移動到選定的。

這裏是一個工作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>

來源

2014-07-03 16:56:30

感謝您的幫助，您提供的示例工作得很好，但只有當我第一次將從$ scope.clientsList返回的結果集傳遞給$ scope.availableclients時。如果我嘗試從$ scope.clientsList加載，就像我最初在我的問題中做的那樣，它不會加載可用客戶端列表中的任何數據.....所以我錯過了什麼/在這裏做錯了什麼？在此先感謝 – MChan

這是其中一個問題：持續使用可用客戶端，或持續使用clientsList，但不是兩者。 –

哦，我看到了，非常感謝你的澄清，感謝它 – MChan

關於我的評論/問題。我其實找到了答案。因此，對於那些來到這裏並具有相同問題的人，這裏是我發現的。

將項目從一個SELECT列表移動到另一個SELECT列表時，源列表上的角度模型可能會「丟失」。爲了避免這種情況，改變爲每個列表必須在單獨的$ apply函數調用中完成。下面是一個事件處理程序

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); 
    };

的「項目」削減例如從內部被克隆與angular.copy因此它可以在第二個角度$使用申請我的選擇有2個屬性：值和displayValue 我還將$ timeout和$ scope分配給指令構造函數中的'self'變量。希望這有助於

來源

2016-06-13 22:37:08 GregJF

AngularJS在兩個選擇列表之間移動項目

回答

相關問題