Javascript UI可排序，带有用于ng重复的角度过滤器

如果列表中有一个过滤器被angular重复，那么UI sortable（）插件似乎无法正常运行。拖放操作无法按预期工作

这表现在这两个小提琴上：

第一：有过滤器-拖放不会停留在原位

HTML:

第二：没有过滤器-按预期工作

同样

HTML:

{{item.name}

我还将在他们的github回购协议上创建一个问题，但如果有人有解决方案，那就太好了

在中，您可以看到

操纵模型的过滤器（如过滤器、orderBy、limito等）应应用于控制器中，而不是ng repeat（）。
这是首选方式，因为它：
-性能方面是否更好
-减少代码重复的机会
-由angularJS团队建议
-它不会破坏生成的DOM元素和ng模型项的匹配

所以，是的，不要在视图中进行过滤，它不打算用于ui可排序

例如：

JS:

HTML:

{{item.name}

您正在ng模型中传递一个数组

ngModel目录的工作方式与另一个属性类似，如id，可由angular访问

而ngModel主要用于生成数据的标记，如input、textarea、select和其他自定义指令

只需使用一般的DOM标识，而不是从id访问数据，如

$scope.variable=document.getElementById（'someElement'）。值

---

angular使用ngModel指令以两种方式绑定数据。

但是：不要忘记，此解决方案将删除数组中的项。您可以使用一个作用域数组和一个javascript数组。原始数据位于javascript数组中。

<div ng-controller="Controller">
  <ul ui-sortable="sortableOptions" id="test" ng-model="items">
    <li class="line" ng-repeat="item in items | filter: myFilter">        
        {{item.name}}
    </li>
  </ul>
</div>

var myApp = angular.module('myApp',['ui.sortable']);

myApp.controller('Controller', ['$scope', function($scope) {
    $scope.name = 'Superhero';
    $scope.items = [
        {name: 'TEST'},
        {name: 'TEST2'}, 
        {name: 'TEST3'}, 
        {name: 'TEST4'},
        {name: 'TEST5'},
        {name: 'TEST6'},
        {name: 'TEST7'},
        {name: 'TEST8'}
    ]

    $scope.myFilter = function (item) { 
        return item.name !== 'TEST';
    };
    $scope.sortableOptions = {
        opacity: '0.8',
        axis: 'y',
        tolerance: 'pointer',
    }
}]);

<div ng-controller="Controller">
  <ul ui-sortable="sortableOptions" id="test" ng-model="items">
    <li class="line" ng-repeat="item in items">
      {{item.name}}
    </li>
  </ul>
</div>

 $scope.filtered= $filter('filter')($scope.items, $scope.myFilter);

<li class="line" ng-repeat="item in filtered">        
    {{item.name}}
</li>