我在 AngularUI 中使用 Sortable 来管理多个可排序列表。我已经让它工作到可以轻松地在列表之间移动项目并相应地更新其相应模型的地步。但是,如果我包含查询过滤器,如果发生以下情况,我会遇到一些问题:
- 用户输入不是列表第一个条目的项目的搜索字段。
- 用户将过滤结果中的第一项从一个列表移动到另一个列表。
- 它似乎有效,直到查询被清除并显示初始列表。虽然您似乎在应用查询时移动了条目,但您会注意到在它被清除后,未过滤数组中的第一个条目被移动了。
拖放时,Sortable 似乎没有考虑过滤器。这是相关的HTML:
<p>Search: <input ng-model="query" /></p>
<div class="column-wrapper">
<ul ui-sortable="sortableTemplates" ng-model="list1" id="sortable1" class="connectedSortable">
<li ng-repeat="item in list1|filter:query" class="itemBox">{{item.name}}</li>
</ul>
<ul ui-sortable="sortableTemplates" ng-model="list2" id="sortable2" class="connectedSortable">
<li ng-repeat="item in list2|filter:query" class="itemBox">{{item.name}}</li>
</ul>
</div>
以及对应的JS:
var app = angular.module('myApp', ['ui.sortable']);
app.controller('test', function($scope) {
$scope.list1 = [
{name: 'ABC'},
{name: 'DEF'},
{name: 'GHI'}
];
$scope.list2 = [
{name: 'JKL'},
{name: 'MNO'},
{name: 'QRS'}
];
$scope.sortableTemplates = {
connectWith: '.connectedSortable'
}
});
要重现该问题,您可以尝试搜索GHI
,然后转到GHI
list2。然后,清除搜索框。ABC
是实际移动到 list2 的那个(因为它是该数组中的第一个元素),并GHI
保留在 list one 中。
有没有办法让 Angular 过滤器进行排序,以便在列表之间排序时保留原始索引?
(我是使用 Angular 和 JQueryUI 的新手,所以答案可能非常明显。我发现了类似的问题,但似乎没有直接解决这个问题。)