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

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

值

*编辑：看到你更新的代码后，你好像拼接了两次。您是在 try 语句中第一次这样做，然后它转到 if 语句，在那里它也将是 true。如果你正在尝试编写一个函数来拼接出给定索引处的对象，你可以这样做：

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

Answer 2

以下代码按我的预期工作，似乎是您要实现的目标：

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

console.log(sounds);

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

Answer 3

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

来过这里：

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

曾经在这里：

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

只需删除第二部分，你应该没问题，我看不出你在第一行 splice 之后想做什么。

Answer 4

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

Answer 5

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

理想情况下使用插值应该会导致解析错误而不是这种行为（除非使用非常旧的 angular 版本，即 < 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 special 属性会得到更新以反映实际指数。所以在这种情况下也使用 $index 来传递索引而不是使用缓存的 ng-inited idx.

Javascript 拼接删除错误项

Javascript splice removing wrong items

javascript

arrays

angularjs

angularjs-scope

angularjs-ng-repeat