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

ADDED TEMPLATE：

<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-repeat表达式{{$index}}内使用插值removeSoundFromSelection({{$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-init的范围属性。因此，即使在拼接数组之后项目从DOM中删除，ng-inited idx仍将具有项目的旧索引，其中$index特殊属性将更新以反映实际索引。因此，在这种情况下，使用$index来传递索引而不是使用缓存的ng-inited 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...

Javascript拼接删除错误的项目

5 个答案: