如何将视图顺序(使用 orderBy)与模型顺序相关联

How to correlate view order (using orderBy) with model order

我的 AngularJS 应用程序中有一个明显简单但又具有挑战性的问题:

在视图上使用 orderBy 时,我失去了相关模型的顺序与视图顺序之间的相关性。

我想做的事情:我的观点是table。我想为所选行设置高亮 class 并且我想使用光标 up/down 键移动此高亮。

我尝试使用 track by currentDocument.objectid$index 与跟踪分离,但这似乎不起作用。

如何将视图中当前突出显示的行与相关模型中当前突出显示的元素相关联,以便我可以使用 -1+1 和光标键?

由于数据的顺序对您的业务流程很重要,因此将顺序作为实际模型的一部分是有意义的。如果您阅读 angular api (https://docs.angularjs.org/api/ng/filter/orderBy) 上 orderby 的最后一个示例,您会注意到他们实现了这一点。基本上,不是将 orderby 直接绑定到某个模型值,而是创建您自己的排序函数并手动排序您的模型。

我在这里创建了一个 plunker:http://plnkr.co/edit/oM97ZTAIHTjI6YFiGDwI?p=preview 只需单击人员姓名即可查看示例(然后重新排序列表并重试)。

基本上,您可以像这样创建一个手动排序函数:

$scope.order = function(predicate, reverse) {
    $scope.friends = orderBy($scope.friends, predicate, reverse);
};

这实际上是重新排序模型本身,而不仅仅是视图数组。你可以随心所欲地称呼它。然后您可以简单地从视图中传递 $index,它将正确关联到视图顺序。