使用angularjs添加和刪除陣列問題中的項目

-2

當用戶單擊時刪除按鈕在第一個列表中我需要刪除項目並在第二個列表中添加相同的項目。使用angularjs添加和刪除陣列問題中的項目

當用戶單擊第二個列表中的添加按鈕時，我需要刪除第二個列表中的項目並添加到第一個列表中。

但問題是當我點擊「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/

來源

2016-09-20 CodeMan

什麼是「Berglundssnabbköp」？ – azad

你的JSFiddle與你的問題不匹配 – Phil

@azad我想象它是'$ scope.records'中的條目之一（但不是第一個） – Phil

Array.prototype.splice要求項目的指數作爲第一個參數。要了解這一點，你可以使用Array.prototype.indexOf ...

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

另外，你應該不特定的orderBy表達式，如果你的價值觀僅僅是字符串，只需使用| 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>

來源

2016-09-20 04:39:18 Phil

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>

來源

2016-09-20 04:43:39 azad

你的Angular版本看起來有點破舊（2014年8月23日發佈）。此外，作爲控制器的全局函數已被棄用一段時間 – Phil

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

來源

2016-09-20 04:48:34 VjyV

由於orderBy過濾器，'$ index'將不會引用每個數組中'item'的實際位置，所以這將刪除錯誤元素。 – Phil

沒有那麼好的考慮 – VjyV

但是如果你在數組中給字符串賦值，那麼過濾錯了吧？ – VjyV

使用angularjs添加和刪除陣列問題中的項目

回答

相關問題