javascript - 如何在 Angularjs 应用程序中删除数组中的元素

Question

我正在尝试执行一项基本任务:从数组中删除一个项目。
数组看起来像这样:

myWordsInJSON = [{"eng":"frau","rus":"жена"},{"eng":"mann","rus":"муж"},{"eng":"witwe","rus":"вдова"},{"eng":"witwer","rus":"вдовец"},{"eng":"schwiegervater","rus":"свекор"}]

这是我的 html 代码:

<tr ng-repeat="item in myWordsInJSON">
          <td>{{$index + 1}}</td>
          <td>{{item[Params.lang1]}}</td>
          <td>{{item[Params.lang2]}}</td>
          <td><span class="label label-danger"
                         ng-click="cut({{$index}})">x</span>
          </td>
        </tr>

Output screenshot

看起来很棒。当我按下“删除”标签时，我的 Controller 的剪切功能开始:

 $scope.cut = function(index){
  $scope.myWordsInJSON.splice(index,1);
  if ($scope.myWordsInJSON.length == 1)
    $scope.myWordsInJSON = [];
  console.log('cuted, index =', index,$scope.myWordsInJSON);
};

但是奇怪的事情发生了。 从数组开头剪切一些项目后，我得到了这张图片:

everythig looks ok

DOM 看起来很棒，我数组的最后一个元素是:

<tr ng-repeat="item in myWordsInJSON" class="ng-scope">
          <td class="ng-pristine ng-untouched ng-valid ng-binding">2</td>
          <td class="ng-binding">schwiegervater</td>
          <td class="ng-binding">свекор</td>
          <td><span class="label label-danger" ng-click="cut(1)">x</span>
          </td>
        </tr>

但是!!!当我按下这个元素时，它必须调用我的剪切函数，如 cut(1)，什么也没有发生，在我的控制台中我看到

index = 4

这意味着我的函数正在获取 index=4 而不是 index=1

所以，看起来我的初始页面编译索引仍然在这里...... 我该如何解决这个问题？

更新!

通过使用“$index”而不是“{{$index}}”解决了该问题。沉入 valverde93 。但我仍然不明白为什么会发生这种情况)))也许有人可以解释一下？

Answer 1

我在当前的项目中遇到了同样的问题。问题在于重复元素的索引和该数组中对象的实际索引不同。

为了解决这个问题，我必须像这样传递对象的ID
ng-click="deleteForId(repeatedElement.id)
然后，在 deleteForId 函数中，我在数组中搜索该对象并获取其索引。只有那时我才打电话
$scope.myObj.splice(index, 1);