Question

当用户点击第一个列表中的删除按钮时，我需要删除该项目并在第二个列表中添加相同的项目。

当用户点击第二个列表中的“添加”按钮时，我需要删除第二个列表中的项目并添加到第一个列表中。

但问题是当我点击“Berglundssnabbköp”时，该项目已添加到第二个列表但删除了第一个项目。

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>

脚本：

$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要求项目的索引作为第一个参数。要找到这个，您可以使用Array.prototype.indexOf ...

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

此外，如果您的值只是字符串，则不应指定orderBy表达式，只需使用| orderBy。

＆＃13;

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);
    };
  }
]);

＆＃13;

<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>

＆＃13;

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

＆＃13;

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);
};
}

＆＃13;

<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>

＆＃13;

使用angularjs添加和删除数组问题中的项目

3 个答案: