我正在尝试使用下面的代码在两个选择列表之间移动项目,但是没有将项目从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 = []; });
模板中有几个小问题:
availableclients
selectedclients
clientsList
您移动的是ID,而不是对象。您的ng-option应该只是
client as client.name for client in availableclients
您 删除所有 按钮将从可用移到选定,而不是从选定移到可用。
这是一个工作正常的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>