1

我试图在重新排序后从列表中删除单个项目，但它似乎在单击时从列表中删除多个项目。

代码：

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

}]);

样品工作小提琴在这里

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

1.)点击添加地图。

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

3.) 现在尝试通过上下拖放重新排序记录。

4.) 单击任何删除按钮。

  • 单击删除按钮并删除进一步停止工作时，它将删除多条记录。
4

1 回答 1

0

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

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

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

至：

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

我认为部分问题可能是因为存在重复。该数组是一个对象列表，所以 Angular 无法通过比较来跟踪它们，除非你给 Angular 一些东西来跟踪它们。我认为。因此，在乱序时删除它们可能会扰乱 Angular 跟踪它们的方式。给 Angular 一些跟踪的东西可以解决这个问题。

于 2016-08-04T17:06:29.040 回答