我试图使用下面的代码在两个选择列表之间移动项目,但项目不会从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 = [];
});
您的模板中存在几个小问题：
>您正在将对象从可用客户端移动到选定客户端,但第一个选择显示来自clientsList的选项,而不是来自可用客户端的选项
>您正在移动ID而不是对象.您的ng选项应该是
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],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],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>
