Add and delete items in array issue using angularjs

Question

when user click delete button in first list i need to delete the item and add same item in second list.

when user click Add button in second list i need to delete the item in second list and added to first one.

But issue is when i click "Berglunds snabbköp" the item added to second list but deleted first item.

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/

@azad I imagine it's one of the entries in $scope.records (but not the first one) — Phil
– Phil, Commented Sep 20, 2016 at 4:46

Azad · Accepted Answer · 2016-09-20 04:43:39Z

0

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>

answered Sep 20, 2016 at 4:43

Azad

5,2725 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

Your Angular version is looking a little worn around the edges (released Aug 23, 2014). Also, global functions as controllers has been deprecated for some time

Phil · Accepted Answer · 2016-09-20 05:30:48Z

Array.prototype.splice requires the index of the item as the first argument. To find this, you can use Array.prototype.indexOf...

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

Additionally, you should not specific an orderBy expression if your values are just strings, just use | orderBy.

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>

VjyV · Accepted Answer · 2016-09-20 04:48:34Z

-1

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>

answered Sep 20, 2016 at 4:48

VjyV

3342 silver badges14 bronze badges

5 Comments

Phil Over a year ago

The $index will not refer to the actual position of the item in each array due to the orderBy filter so this will remove the wrong elements.

VjyV Over a year ago

No that's consider properly

VjyV Over a year ago

But if you give value as string in array then filteration wrong right ?

VjyV Over a year ago

Give me some one type value i'll make order by and also delete,add properly

Phil Over a year ago

Change your filter to just use orderBy without an expression (seeing as you're just using strings in your arrays) then you'll see the problem ~ x in whatever | orderBy

Collectives™ on Stack Overflow

Add and delete items in array issue using angularjs

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related