使用角度js從多選框中添加或刪除選定的元素

我想要顯示一個動態表，但是在運行時我將減弱選擇的表列。爲此，我採取了兩個多選框，第一個多選擇使用Json加載所有列名稱。使用角度js從多選框中添加或刪除選定的元素

現在我的要求是，我想添加選定的列名從第一個多選框到第二個多選框。如果需要，我也想從第二個多選框中刪除。

我採取了按鈕，一個用於添加和其他刪除。任何人都可以幫助我滿足這個要求。我怎樣才能做到這一點使用角js。請參考附圖以清楚我的要求。預先感謝..

2016-11-29 Deepak Talape

到目前爲止你做了什麼？請提供代碼 – Mistalis

@ mistalis只是給我一些時間。我會爲你提供完整的json結構。所以你會得到exat的想法。並感謝您的快速回復.... –

這就是你想要的http://stackoverflow.com/a/24559430/1544886 –

angular.module('app', []).controller('MoveCtrl', function($scope) { 
 

 
    $scope.available = []; 
 
    $scope.selected = []; 
 

 
    $scope.moveItem = function(items, from, to) { 
 

 
    angular.forEach(items, function(item) { 
 
     var idx = from.indexOf(item); 
 
     from.splice(idx, 1); 
 
     to.push(item); 
 
    }); 
 

 
    // clear selection 
 
    $scope.available = ""; 
 
    $scope.selected = ""; 
 
    }; 
 

 
    $scope.moveAll = function(from, to) { 
 

 
    angular.forEach(from, function(item) { 
 
     to.push(item); 
 
    }); 
 
    from.length = 0; 
 
    }; 
 

 
    $scope.selectedclients = []; 
 
    $scope.availableclients = [{ 
 
    id: 1, 
 
    name: 'Bob' 
 
    }, { 
 
    id: 2, 
 
    name: 'Sarah' 
 
    }, { 
 
    id: 3, 
 
    name: 'Wayne' 
 
    }, { 
 
    id: 4, 
 
    name: 'Pam' 
 
    }]; 
 

 
});

input { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MoveCtrl"> 
 
    <h1>Move items between Select boxes</h1> 
 

 
    <div style="float:left"> 
 
    <div>Available Clients</div> 
 
    <div> 
 
     <select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 100px;height:100px"></select> 
 
    </div> 
 
    </div> 
 
    <div style="float:left; width: 100px; text-align:center"> 
 
    <div>&nbsp;</div> 
 
    <input id="moveright" type="button" value=">" ng-click="moveItem(available, availableclients,selectedclients)" /> 
 
    <input id="moverightall" type="button" value=">>" ng-click="moveAll(availableclients,selectedclients)" /> 
 
    <input id="move left" type="button" value="<" ng-click="moveItem(selected, selectedclients,availableclients)" /> 
 
    <input id="moveleftall" type="button" value="<<" ng-click="moveAll(selectedclients,availableclients)" /> 
 
    </div> 
 

 
    <div style="float:left"> 
 
    <div>Selected Clients</div> 
 
    <div> 
 
     <select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 100px;height:100px"></select> 
 
    </div> 
 
    </div> 
 
    <div style="clear:both"> 
 
    <br/> 
 
    <div>Selected Clients: {{selectedclients}}</div> 
 
    <div>Available Clients: {{availableclients}}</div> 
 
    <div>Selected: {{selected}}</div> 
 
    <div>Available: {{available}}</div> 
 
    </div> 
 
</body> 
 

 
</html>

幸得AngularJS moving items between two select list爲基礎。但是，只有在選擇多個項目時纔會移動單個項目。

來源

2016-12-05 08:50:57

@K Scandrett非常感謝。它的工作 –

使用角度js從多選框中添加或刪除選定的元素

回答

相關問題