ui可排序的代理与ng-model

时间:2018-06-26 12:50:12

标签: angularjs angular-ui-sortable

在AngularJS应用程序中,我创建了一个带有列表的ui-sortable。当我尝试对列表进行排序时,它表现得很差。没有ng-model,我不会遇到这个问题,但是ui-sortable需要拥有一个ng-model,否则它将在控制台中显示错误。为什么ng-model会造成这个问题?我是否在错误的情况下创建了模型对象?

我在this jsFiddle中再现了错误。

要重现:将Laurent拖到列表的底部,Laurent将出现在中间,而不是应该出现的底部。

我希望有人可以帮助我解决这个问题。

1 个答案:

答案 0 :(得分:1)

在ui-sortable中似乎是一个错误,您正在使用两个版本的非常过时的版本。 在以下位置查看源代码
https://github.com/angular-ui/ui-sortable/blob/v0.0.1/src/sortable.js 并与您的版本进行比较 https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js 经过一些调试后,您可能会注意到

onStop = function(e, ui) {
            // digest all prepared changes
            if (ui.item.sortable.resort && !ui.item.sortable.relocate) {

              // Fetch saved and current position of dropped element
              var end, start;
              start = ui.item.sortable.index;
              end = ui.item.index();
              if (start < end)
                end--;

              // Reorder array and apply change to scope
              ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);

            }
            if (ui.item.sortable.resort || ui.item.sortable.relocate) {
              scope.$apply();
            }
          };

删除if语句start

 onStop = function(e, ui) {
            // digest all prepared changes
            if (ui.item.sortable.resort && !ui.item.sortable.relocate) {

              // Fetch saved and current position of dropped element
              var end, start;
              start = ui.item.sortable.index;
              end = ui.item.index();

              // Reorder array and apply change to scope
              ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);

            }
            if (ui.item.sortable.resort || ui.item.sortable.relocate) {
              scope.$apply();
            }
          };

我不建议手动更改库代码,而建议升级到新版本的代码,可能会有更多功能和更多错误修复。