[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements from one of the arrays, while the right div displays elements from another array. When I click on an element in the left div and press the right button, that element should be removed from the left div and moved to the right div. Similarly, when I click on an element in the right div and press the left button, that element should be removed from the right div and inserted back into the left div. Additionally, any changes made should reflect in the parent array where the element was originally located.
Here is the HTML code:
<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>
And here is the Angular code snippet:
$scope.list = ['date', 'birth'];
$scope.list1 = ['date', 'birth'];
$scope.list2 = ['date', 'birth'];
$scope.select=[];
$scope.insert=function(item,list){
attribute= item;
$scope.naml=list;
console.log(naml);
};
$scope.add=function()
{
var index=$scope.naml.indexOf(attribute);
$scope.naml.splice(index, 1);
$scope.select.push(attribute);
attribute=null;
}