Question

我正在尝试在重新订购后从列表中删除单个项目，但它似乎只需单击即可从列表中删除多个项目。

代码：

var testApp = angular.module('testApp', ["kendo.directives"]);
testApp.controller('testController', ['$scope', function($scope) {
  $scope.mapList = [];
  $scope.addMap = function() {
    $scope.mapList.push({
      'mapNameList': [{
        'mapName': 'Test1'
      }]
    });
  };

  $scope.placeholder = function(element) {
    return element.clone().addClass("placeholder").text("drop here");
  };

  $scope.hint = function(element) {
    return element.clone().addClass("hint"); >>---- i feel issue is because of this part but not sure 
  };

  $scope.removeItem = function(data, index) {
    data.mapNameList.splice(index, 1); // it removes multiple but fires one time .
  };

  $scope.addMap = function() {
    $scope.mapList.push({
      'mapNameList': [{
        'mapName': 'Test1'
      }]
    });
  };

  $scope.addDetail = function(data) {
    data.mapNameList.push({
      'mapName': "Test"
    });
  };

}]);

示例工作小提琴 here

重现步骤： //参考小提琴链接

1.）点击添加地图。

2.）现在点击Add Detail 5次。

3.）现在尝试通过拖放和重放来重新排序记录。下来。

4.）点击任何删除按钮。

点击删除按钮后，它会删除多条记录。删除进一步停止工作。

Answer 1

快速查看kendo-sortable指令后，似乎存在继承和$index变量的问题。我不想听起来像我知道发生了什么，因为我没有多看一下该指令，但是拖动元素不会改变它在数组中的位置（索引），但是使用$index调用了removeItem函数，它以某种方式定位错误的项目。

无论哪种方式，我都可以通过更改HTML上的第26行来修复错误：

<li ng-repeat="n in data.mapNameList">

为：

<li ng-repeat="n in data.mapNameList track by $index">

我认为部分问题可能是因为存在重复问题。数组是一个对象列表，因此Angular不能通过比较跟踪它们，除非你给Angular一些东西来跟踪它们。我认为。因此，在乱序时删除它们会弄乱Angular如何跟踪它们。给Angular一些东西来解决这个问题。

无法从列表中删除项目？

1 个答案: