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

看起来很棒。当我按下“删除”标签时，我的控制器的切割功能开始了：

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

BUT !!!当我按下这个必须调用我的剪切功能的元素时，如 cut（1），没有任何反应，在我的控制台中我看到了

index = 4

这意味着我的功能是 index = 4 而不是 index = 1

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

更新！的

使用'$ index'代替'{{$ index}}'解决了问题。沉没到 valverde93。但我仍然无法理解为什么会发生这种情况）））Maby有人可以解释吗？

Answer 1

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

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

如何从Angularjs应用程序中的数组中删除元素

1 个答案: