Hinzufügen und Löschen von Elementen im Array Problem mit angularjs

Question

wenn Benutzer klicken löschen Schaltfläche in der ersten Liste Ich muss das Element löschen und das gleiche Element in der zweiten Liste hinzufügen.

Wenn Benutzer auf die Schaltfläche Hinzufügen in der zweiten Liste klicken, muss ich das Element in der zweiten Liste löschen und zum ersten hinzufügen.

Aber Problem ist, wenn ich auf "Berglunds snabbköp" den Artikel in der zweiten Liste, aber gelöscht ersten Artikel klicken.

HTML:

<b>First one</b> 
<ul> 
<li ng-repeat="x in records|orderBy:x">{{x}} 
<input type="button" ng-click="del(x)" value="Delete"> 
</li> 
</ul> 

<hr> 
<b>Second one</b> 
<ul> 
<li ng-repeat="x in details|orderBy:x">{{x}} 
<input type="button" ng-click="add(x)" value="ADD"> 
</li> 
</ul> 

Script:

$scope.del=function(item){ 
alert(item); 
$scope.details.push(item); 
$scope.records.splice(item,1); 
}; 


$scope.add=function(item){ 
alert(item); 
$scope.records.push(item); 
$scope.details.splice(item,1); 
}; 

http://jsfiddle.net/halirgb/Lvc0u55v/

Answer 1

Array.prototype.splice erfordert die Index des Elements als erstes Argument. Um dies zu finden, können Sie Array.prototype.indexOf verwenden ...

$scope.whatever.splice($scope.whatever.indexOf(item), 1) 

Darüber hinaus sollten Sie nicht spezifisch ein orderBy Ausdruck, wenn Ihre Werte nur Strings, nur | orderBy verwenden.

---

angular.module('so', []).run(['$rootScope', 
 
    function($scope) { 
 
    $scope.records = ['F', 'A', 'C', 'B', 'E', 'D']; 
 
    $scope.details = ['H', 'J', 'G', 'I']; 
 

 
    $scope.del = function(item) { 
 
     $scope.details.push(item); 
 
     $scope.records.splice($scope.records.indexOf(item), 1); 
 
    }; 
 

 
    $scope.add = function(item) { 
 
     $scope.records.push(item); 
 
     $scope.details.splice($scope.details.indexOf(item), 1); 
 
    }; 
 
    } 
 
]);

<main ng-app="so" style="display:flex;justify-content:space-around;"> 
 
    <section> 
 
    <b>First one</b> 
 
    <ul> 
 
     <li ng-repeat="x in records | orderBy">{{x}} 
 
     <input type="button" ng-click="del(x)" value="Delete"> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
    <section> 
 
    <b>Second one</b> 
 
    <ul> 
 
     <li ng-repeat="x in details | orderBy">{{x}} 
 
     <input type="button" ng-click="add(x)" value="ADD"> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
</main> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Answer 2

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

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 

 
    $scope.details = ["A", "B", "C", "D", "E", "F"]; 
 

 
    $scope.records = ["1", "2", "3", "4", "5", "6"]; 
 

 
    $scope.del = function(item) { 
 
    alert(item); 
 
    $scope.details.push(item); 
 
    $scope.records.splice($scope.records.indexOf(item), 1); 
 
    }; 
 

 

 
    $scope.add = function(item) { 
 
    alert(item); 
 
    $scope.records.push(item); 
 
    $scope.details.splice($scope.details.indexOf(item), 1); 
 
    }; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    Hello, {{name}}! 
 

 
    <b>First one</b> 
 
    <ul> 
 
    <li ng-repeat="x in records">{{x}} 
 
     <input type="button" ng-click="del(x)" value="Delete"> 
 
    </li> 
 
    </ul> 
 

 
    <hr> 
 
    <b>Second one</b> 
 
    <ul> 
 
    <li ng-repeat="y in details">{{y}} 
 
     <input type="button" ng-click="add(y)" value="ADD"> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

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

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.records = ["a","b"]; 
 
    $scope.details = ["1","2"]; 
 
    
 
    
 
$scope.del=function(item,i){ 
 
alert(item); 
 
$scope.details.push(item); 
 
$scope.records.splice(i,1); 
 
}; 
 

 

 
$scope.add=function(item,i){ 
 
alert(item); 
 
$scope.records.push(item); 
 
$scope.details.splice(i,1); 
 
}; 
 
}

<html ng-app="myApp"> 
 
    <head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script></head> 
 
    <body> 
 
<div ng-controller="MyCtrl"> 
 
<b>First one</b> 
 
<ul> 
 
<li ng-repeat="x in records|orderBy:x">{{x}} 
 
<input type="button" ng-click="del(x,$index)" value="Delete"> 
 
</li> 
 
</ul> 
 

 
<hr> 
 
<b>Second one</b> 
 
<ul> 
 
<li ng-repeat="x in details|orderBy:x">{{x}} 
 
<input type="button" ng-click="add(x,$index)" value="ADD"> 
 
</li> 
 
</ul> 
 
</div></body> 
 
</html>