Question

我有一个角色应用plunker。

这里我试图使用一个列表来实现拖放功能。

这是应用程序：

app.controller('MainCtrl', function($scope) {
  $scope.people = [
      {'id':'1' ,'name':'John','category':'m'},
      {'id':'2', 'name':'Jack','category':'m'},
      {'id':'3','name':'Mark','category':'m'},
      {'id':'4','name':'Ernie','category':'m'},
      {'id':'5','name':'Jane','category':'w'},
      {'id':'6','name':'Jill','category':'w'},
      {'id':'7','name':'Betty','category':'w'},
      {'id':'8','name':'Mary','category':'w'}
      ];


      $scope.addText = "";


      $scope.dropSuccessHandler = function($event,index,array){
          //array[index].category='w';
          //findAndRemove(array, id, pid);
      //    alert(index, array[index]);
          array.splice(index,1);
      };


      $scope.onDrop = function($event,$data,array){
         // $data.category='m';

         // $scope.people.splice($scope.people.indexOf($data.id), 1);

          $scope.people.push($data);
          //array.push($data);
      };

});

问题是，当我试图从右到左放置一个元素时，控制器变得非常混乱。 splice命令正在删除错误的名称。当我们从左到右放置一个元素时，它工作正常。

我如何解决这个问题？

Answer 1

当您拖动右侧列表中的项目时，递送到index函数的dropSuccessHandler参数是右侧列表元素的索引，而不是实际的索引javascript数组。所以Jane是索引0，Jill是索引1，等等。因此，如果你拖动Jill，dropSuccessHandler函数会删除索引1处的数组元素，即Jack。

Angularjs使用单个列表进行拖放

1 个答案: