AngularJS在两个选择列表之间移动项目 [英] AngularJS moving items between two select list

问题描述

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

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>

控制器:

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


  });  

推荐答案

模板中存在几个小问题:

There are several small problems in your template:

• 您要将对象从availableclients移到selectedclients，但是第一个选择显示的是clientsList中的选项，而不是availableclients
中的选项

• 您要移动ID而不是对象.您的ng-option应该只是

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

这是一个工作正常的plunkr: http://plnkr.co/edit/RYEmpkBjQStoCfgpWPEK?p=预览

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>

这篇关于AngularJS在两个选择列表之间移动项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！