Javascript拼接删除错误的项目

Question

我有以下对象的数组。

[{"name":"Rain"},{"name":"Storm"},{"name":"Forest"}]

具有索引[0, 1, 2] 。 我正在尝试使用代码删除指定位置的项目：

$scope.selectedSounds.splice(index, 1);      

但是它以错误的方式删除项目，例如无法删除最后一个项目。 如果我尝试删除索引为1的项目，则会删除索引为2的项目。

请问有什么问题吗？

我尝试了两种方式：

$scope.removeSoundFromSelection = function(index) {
    try {
        // First
        $scope.selectedSounds.splice(index, 1);
        var indexNew = $scope.selectedSounds.indexOf(index);
        console.log(indexNew);
        if (indexNew > -1) {
            $scope.selectedSounds.splice(indexNew, 1);
        }

        // Second
        if ($scope.selectedSounds.hasOwnProperty(index)){
            delete $scope.selectedSounds[index];
        }

        //delete $scope.selectedSounds[index];
    } catch(e) {
        $scope.showAlert();
    }
};

添加的模板：

<div class="list">
          <a class="item item-thumbnail-left"  ng-repeat="sound in selectedSounds">
              <img src="cover.jpg">
              <h2>{{sound.name}}</h2>
              <p>TEST</p>
              <div class="customDeleteBtnInList">
                  <button ng-click="removeSoundFromSelection({{$index}})" class="button button-icon icon ion-close-circled"></button>
              </div>
          </a>
      </div>

Answer 1

您将两次删除该索引处的项目。

曾经在这里：

$scope.selectedSounds.splice(index, 1);

然后在这里：

// Second
if($scope.selectedSounds.hasOwnProperty(index)){
    delete $scope.selectedSounds[index];
}

只需删除第二部分，就可以了，我看不到在第一条splice线之后您可能要做什么。

Answer 2

您正在ng重复表达式removeSoundFromSelection({{$index}})内的{{$index}}使用插值。 只需删除插值并仅使用$index ，它将根据范围自动进行评估。 您只需要$scope.selectedSounds.splice(index, 1) 。

理想情况下，使用插值法应该引起解析错误而不是这种行为（除非使用非常老的角度版本，即<1.2.0）。

工作演示

 angular.module('app', []).controller('ctrl', function($scope) { $scope.selectedSounds = [{ "name": "Rain" }, { "name": "Storm" }, { "name": "Forest" }]; $scope.removeSoundFromSelection = function(index) { $scope.selectedSounds.splice(index, 1); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div class="list"> <a class="item item-thumbnail-left" ng-repeat="sound in selectedSounds"> <img src="cover.jpg"> <h2>{{sound.name}}</h2> <p>TEST</p> <div class="customDeleteBtnInList"> <button ng-click="removeSoundFromSelection($index)" class="button button-icon icon ion-close-circled">Remove</button> </div> </a> </div> </div> 

---

即使问题中的此特定方案未使用ng-init但如果您还使用ng-init初始化的索引别名，也会发生删除错误项目的问题。 只需将该方案添加到该问题的将来访问答案中即可。 即例如：

<a class="item item-thumbnail-left"  
    ng-repeat="sound in selectedSounds" ng-init="idx=$index">
   ....
    <button ng-click="removeSoundFromSelection(idx)"

这将最终删除错误的项目，因为在摘要周期内不会监视和更新ng初始化的范围属性。 因此，即使在拼接数组ng-initted idx之后从DOM中删除了该项目，该项目的旧索引仍然会保留，其中$index特殊属性将得到更新以反映实际的索引。 因此，在这种情况下，也请使用$index传递索引，而不要使用ng初始化的缓存idx 。

Answer 3

如果要删除中间项目，则索引应等于1。您执行的任何逻辑都可能为index提供了错误的值

*编辑：看到更新的代码后，您好像在拼接两次。 您是第一次在try语句中执行此操作，然后转到if语句，这也将成立。 如果您试图编写一个仅在给定索引处拼接出对象的函数，则可以执行以下操作：

$scope.removeSoundFromSelection = function(index) {
  if($scope.selectedSounds[index]){
    $scope.selectedSounds.splice(index, 1);
  }
}

Answer 4

以下代码对我来说可以正常工作，并且似乎正是您要实现的目标：

var sounds = [{"name":"Rain"},{"name":"Storm"},{"name":"Forest"}];
sounds.splice(1, 1);

console.log(sounds);

我的猜测是（在某些时候）您没有使用正确的索引。 看一下根据@Alex J的答案创建该变量的代码

Answer 5

var season = [{"name":"Rain"},{"name":"Storm"},{"name":"Forest"}];
var seasoned= season.slice(0, 2); 
console.log(seasoned); //it sliced rain and storm...