Javascript 在angularjs中将节点从不同数组移动到一个数组，然后再次将其移动到父数组_Javascript_Html_Css_Angularjs

Javascript 在angularjs中将节点从不同数组移动到一个数组，然后再次将其移动到父数组

javascript html css angularjs

Javascript 在angularjs中将节点从不同数组移动到一个数组，然后再次将其移动到父数组,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,[！[enter image description here][1][1]在angularjs中，我有不同的数组，分别命名为list1、list2、，列表3每个数组在不同的列表中使用。我有两个按钮和两个div left div显示不同的数组元素right div显示右div中的元素，所以当我单击left div中的元素并按下right按钮时，元素应该从左侧移除并插入到right div。当我按下left div中的元素并按下left按钮时元素应该从right div中删除，并且应该插入到lef

[！[enter image description here][1][1]在angularjs中，我有不同的数组，分别命名为list1、list2、，列表3每个数组在不同的列表中使用。我有两个按钮和两个div left div显示不同的数组元素right div显示右div中的元素，所以当我单击left div中的元素并按下right按钮时，元素应该从左侧移除并插入到right div。当我按下left div中的元素并按下left按钮时元素应该从right div中删除，并且应该插入到left div和父数组中，我之前已经从父数组中删除了该数组

html代码是：

      <p ng-repeat="item in list1" id="attr">{{item}}</p>
       <button id="btn-right" ng-click="add()">rig</button>
        <button id="btn-left">left</button>

您可以这样实现

HTML页面：

<head>
    <style type="text/css"> 
        .red {
            color: red;
        }
</style>
</head>
<body ng-controller="MyCtrl">
<div style="float:left;border: solid;width: 48%;" align="center">
    <p ng-repeat="item in list1" ng-click="insert(item,'left'); 
toggle = !toggle" ng-class="{'red' : toggle}">{{item}}</p>
</div>

<div style="float:right;border: solid; width: 48%;" align="center">
    <p ng-repeat="item in list2" ng-click="insert(item, 'right'); 
toggle = !toggle" ng-class="{'red' : toggle}">{{item}}</p>
</div>

<div align="center">
    <button id="btn-right" ng-click="takeRight()">Right</button>
    <button id="btn-left" ng-click="takeLeft()">Left</button>
 </div>
</body>


瑞德先生{
颜色：红色；
}
{{{item}
{{{item}
赖特
左边

Javascript:

$scope.list1 = ['dateleft', 'birth'];
$scope.list2 = ['dateright', 'death'];
$scope.itemsOnLeft=[];
$scope.itemsOnRight=[];

$scope.insert=function(item, to){
    switch(to) {
        case "left":
            var index = $scope.itemsOnLeft.indexOf(item);
            if ( index != -1)   {
                $scope.itemsOnLeft.splice(index, 1);
            }   
            else {
                $scope.itemsOnLeft.push(item);
            }

            break;
        case "right":
            var index = $scope.itemsOnRight.indexOf(item);
            if ( index != -1)   {
                $scope.itemsOnRight.splice(index, 1);
            }   
            else {
                $scope.itemsOnRight.push(item);
            }                   
            break;
        default:
            console.log("Error in inserting");
    }
    };

    $scope.takeRight=function()
    {
        for (var i = 0; i < $scope.itemsOnLeft.length; i++) {
            var item = $scope.itemsOnLeft[i];
            var index = $scope.list1.indexOf(item);
            $scope.list1.splice(index, 1); 
            $scope.list2.push(item); 
        }
        $scope.itemsOnLeft.length = 0;              
    };

    $scope.takeLeft=function()
    {
        for (var i = 0; i < $scope.itemsOnRight.length; i++) {
            var item = $scope.itemsOnRight[i];
            var index = $scope.list2.indexOf(item);
            $scope.list2.splice(index, 1); 
            $scope.list1.push(item); 
        }
        $scope.itemsOnRight.length = 0;
    };

$scope.list1=['dateleft'，'birth']；
$scope.list2=['dateright'，'death']；
$scope.itemsOnLeft=[]；
$scope.itemsOnRight=[]；
$scope.insert=函数（项，到）{
切换（至）{
案例“左”：
var index=$scope.itemsOnLeft.indexOf（item）；
如果（索引！=-1）{
$scope.itemsOnLeft.splice（索引1）；
}   
否则{
$scope.itemsOnLeft.push（项目）；
}
打破
案例“权利”：
var index=$scope.itemsOnRight.indexOf（item）；
如果（索引！=-1）{
$scope.itemsOnRight.splice（索引1）；
}   
否则{
$scope.itemsOnRight.push（项目）；
}                   
打破
违约：
日志（“插入错误”）；
}
};
$scope.takeRight=函数（）
{
对于（变量i=0；i<$scope.itemsOnLeft.length；i++）{
var item=$scope.itemsOnLeft[i]；
变量索引=$scope.list1.indexOf（项目）；
$scope.list1.splice（索引1）；
$scope.list2.push（项目）；
}
$scope.itemsOnLeft.length=0；
};
$scope.takeLeft=函数（）
{
对于（变量i=0；i<$scope.itemsOnRight.length；i++）{
var item=$scope.itemsOnRight[i]；
var index=$scope.list2.indexOf（项目）；
$scope.list2.拼接（索引1）；
$scope.list1.push（项目）；
}
$scope.itemsOnRight.length=0；
};

注意：由于使用ng Repeat显示两个列表，因此不允许在列表中添加任何重复项。所以，如果您试图移动一些项目，而目的地已经有了该项目，那么您将以错误告终

希望这就是你要找的

angular.module（“堆栈”，[]）
.控制器（“移动”，功能（$scope）{
//this.apps=功能；
$scope.leftList=[1,2,3]；
$scope.rightList=[4,5,6]；
左，右；
$scope.getLeft=函数（项）{
左=项目；
}
$scope.getRight=函数（项）{
右=项目；
}
$scope.ltr=函数（）{
控制台日志（“左”，左）；
if（$scope.leftList.length）{
$scope.leftList.forEach（函数（每个，索引）{
如果（每个===左）{
$scope.leftList.splice（索引，1）；
}
});
$scope.rightList.push（左）；
左=”；
}
}
$scope.rtl=函数（）{
console.log（“右”，右）；
if（$scope.rightList.length）{
$scope.rightList.forEach（函数（每个，索引）{
如果（每个===右侧）{
$scope.rightList.splice（索引1）；
}
});
$scope.leftList.push（右）；
右=”；
}
}
});
。左，
.对{
宽度：10%；
显示：内联块；
}
butltr先生，
布特尔先生{
显示：内联块；
}

堆栈
{{item}}
ltr
rtl
{{item}}
您能为您的代码添加一个JSFIDLE吗？我已经在SUMBOLE中开发了它！实际上我不明白你的问题。请描述清楚。我有两个分区，一个在左边，一个在右边，我有两个按钮在它们之间，即rtl和ltr rtl（从右到左）和ltr（从左到右）在左div上，当我单击左div上的任何元素和ltr按钮时，我使用不同的数组显示了不同的列表。该元素应显示在右div上，当我单击右div上的元素和rtl按钮时，该元素应从左div中删除。该元素应从右div中删除，并应添加到其所在的父数组中在和之前，应该显示在左边的div中。您可以将plunker或JSFIDLE添加到这里吗！现在，如果我说，“我已经在Supreme中开发了它！”：我想添加js fiddle，但我没有时间，我必须尽快完成它。在这个解决方案中，您甚至可以一次选择多个项目。
$scope.list1 = ['dateleft', 'birth'];
$scope.list2 = ['dateright', 'death'];
$scope.itemsOnLeft=[];
$scope.itemsOnRight=[];

$scope.insert=function(item, to){
    switch(to) {
        case "left":
            var index = $scope.itemsOnLeft.indexOf(item);
            if ( index != -1)   {
                $scope.itemsOnLeft.splice(index, 1);
            }   
            else {
                $scope.itemsOnLeft.push(item);
            }

            break;
        case "right":
            var index = $scope.itemsOnRight.indexOf(item);
            if ( index != -1)   {
                $scope.itemsOnRight.splice(index, 1);
            }   
            else {
                $scope.itemsOnRight.push(item);
            }                   
            break;
        default:
            console.log("Error in inserting");
    }
    };

    $scope.takeRight=function()
    {
        for (var i = 0; i < $scope.itemsOnLeft.length; i++) {
            var item = $scope.itemsOnLeft[i];
            var index = $scope.list1.indexOf(item);
            $scope.list1.splice(index, 1); 
            $scope.list2.push(item); 
        }
        $scope.itemsOnLeft.length = 0;              
    };

    $scope.takeLeft=function()
    {
        for (var i = 0; i < $scope.itemsOnRight.length; i++) {
            var item = $scope.itemsOnRight[i];
            var index = $scope.list2.indexOf(item);
            $scope.list2.splice(index, 1); 
            $scope.list1.push(item); 
        }
        $scope.itemsOnRight.length = 0;
    };