Question

我正在尝试使用下面的代码在两个选择列表之间移动项目，但项目不会从availableClients列表移动到selectedClients列表，所以有人可以检查下面的代码并让我知道我在这里缺少什么？感谢

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


  });

Answer 1

您的模板中存在一些小问题：

您正在将对象从availableclients移动到selectedclients，但第一个选择会显示来自clientsList的选项，而不会显示availableclients
您正在移动ID而非对象。您的ng选项应该只是
```
client as client.name for client in availableclients
```
您的删除所有按钮会从可用状态移至选定状态，而不是从已选择状态移至可用状态。

这是一个有效的傻瓜：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

关于我的评论/问题。我实际上找到了答案。所以对于那些来到这里并且有同样问题的人来说，这就是我找到的。

将项目从一个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克隆'item'，因此可以在第二个角度$ apply中使用它我的选项有2个属性：value和displayValue 我还将$ timeout和$ scope分配给指令构造函数中的'self'变量。希望这有帮助

AngularJS在两个选择列表之间移动项目

2 个答案: