javascript - 使用 Angular js 进行多重选择

Question

我在 AngularJS 中对多选字段有要求。

我有 2 个多选下拉菜单，我需要通过 3 个按钮在它们之间传递数据。我在 JSFiddle 中尝试了示例，但未能成功。请在下面的链接中找到详细信息。

Here is the link

HTML 代码

<div ng-controller="MyCtrl"><select multiple="true" ng-model="selectedDetails" ng-options="c.name+' ('+c.id+')' for c in rule"></select>
<button ng-click='moveSelectedToRight(selectedDetails)'>></button>
 <button ng-click='moveAllSelected(selectedDetails)'>>></button>
<button ng-click='moveSelectedToLeft(selectedDetails)'><</button>
<select multiple="true" ng-model="selectedDetailsCopied" ng-options="c.name+' ('+c.id+')' for c in selectedDetailsCopied"></select>
<div>
    <p>Selected Details: {{selectedDetails }}</p>
    <p>Copied Details: {{selectedDetailsCopied}}</p>
</div>

JS 代码

    var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.selectedDetails = [];
    $scope.selectedDetailsCopied=[];
    $scope.rule = [{
        name: 'Rock',
        id: '0'},
    {
        name: 'white',
        id: '1'},
    {
        name: 'Test',
        id: '2'},
    {
        name: 'Fun',
        id: '3'},
    {
        name: 'Laaa',
        id: '4'
    }];
$scope.moveSelectedToRight = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy(selectedDetails);
    }
    $scope.moveAllSelected = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy($scope.rule);
    }
     $scope.moveSelectedToLeft = function(selectedDetails){
        $scope.selectedDetailsCopied = [];
    }


}

Answer 1

看这个

var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.selectedDetails = [];
        $scope.selectedDetailsCopied = [];
        $scope.rule = [{
               name: 'Rock',
               id: '0'},
           {
               name: 'white',
               id: '1'},
           {
               name: 'Test',
               id: '2'},
           {
               name: 'Fun',
               id: '3'},
           {
               name: 'Laaa',
               id: '4'
           }];
                        
            $scope.moveSelectedToRight = function(){
                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.selectedDetailsCopied.push($scope.rule[indexEl]);
                });

                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.rule.splice(indexEl, 1);
                });
                
                while($scope.selectedDetails.length > 0)
                    $scope.selectedDetails.splice(0, 1);
            }
            $scope.moveAllSelected = function(){
                angular.forEach($scope.rule, function(value, key) {
                    $scope.selectedDetailsCopied.push(value);
                });

                while($scope.rule.length > 0)
                    $scope.rule.splice(0, 1);
            }
            $scope.moveSelectedToLeft = function(){
                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.rule.push($scope.selectedDetailsCopied[indexEl]);
                }); 

                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.selectedDetailsCopied.splice(indexEl, 1);
                });  
            }
            
            $scope.geIndex = function(arr, idElement){
                var itemIndex = {};
                angular.forEach(arr, function(value, key) {
                    if(value.id == idElement || value == idElement){
                        itemIndex = key;
                        return false;
                    }
                });
                return itemIndex;
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    
    <select multiple="true" ng-model="selectedDetails" ng-options="c.id as c.name for c in rule"></select>
    <button ng-click='moveSelectedToRight(selectedDetails)'>></button>
    <button ng-click='moveAllSelected(selectedDetails)'>>></button>
    <button ng-click='moveSelectedToLeft(selectedDetailsMoved)'><</button>
    <select multiple="true" ng-model="selectedDetailsMoved" ng-options="c.id as c.name for c in selectedDetailsCopied"></select>
    <div>
        <p>Selected Details: {{selectedDetails }}</p>
        <p>Copied Details: {{selectedDetailsCopied}}</p>
    </div>
</div>