Javascript AngularUI：使用应用的过滤器在两个列表之间正确更新模型

我在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>

}))

要复制此问题，您可以尝试搜索

GHI

，然后将

GHI

移动到列表2。然后，清除搜索框

ABC

是实际移动到列表2的元素（因为它是该数组中的第一个元素），而

GHI

仍保留在列表1中

有没有一种方法可以让sortable与角度过滤器配合使用，以便在列表之间排序时保留原始索引

---

（我不熟悉使用Angular和JQueryUI，所以答案可能非常明显。我发现了类似的问题，但似乎没有什么能直接解决这个问题。）

正如您所说，ui sortable使用元素索引在列表之间移动，这样，当您移动过滤列表中的第一项时，它会移动原始列表中的第一项。 解决这个问题的一种方法是隐藏您不想移动的项目，而不是像ng repeat中的过滤器那样创建一个新的列表，而不是过滤列表。 因此，在html中：

<li ng-repeat="item in list1" class="itemBox" ng-show="visible(item)">{{item.name}}</li>

---

我在

上创建了一个plunker嘿，我想知道你是否知道一种方法可以让你的答案像ng重复过滤器一样快速？我有一张几百张的单子。当输入搜索框时，“可见”功能会使网页停止。它在本地开发人员身上工作得很好，但在实际数据中却很粗糙。有什么想法吗？@j_walker_dev-我也很好奇。我已经用这个方法运行了它，这在很大程度上是好的，但是如果有太多的元素要搜索，它会慢到爬行。不过，我还没有时间真正深入研究寻找替代方案。我从来没有找到一个好的。我从lodash中实现了一个u.debounce，以使键入速度更快，而实际上它只是没有搜索那么多。如果你想要一些代码，让我知道。隐藏是这里的完美解决方案。它可以在过滤时重新排序。

<li ng-repeat="item in list1" class="itemBox" ng-show="visible(item)">{{item.name}}</li>

$scope.visible=function(item){
  //create an array containing all of the elements in both lists
  var lists=$scope.list1.concat($scope.list2);
  // filter this list using our search term
  var filteredItems=$filter('filter')(lists, $scope.query);
  //if there are no matching items left in our list then return false
  if (filteredItems.length===0){return false;}
  //see if the current item is in the filtered list   
  if (($filter('filter')(filteredItems,item)).length===1){
     return true;
  } else {
     return false;
  }
}