javascript - 将单个项目置于列表顶部

Question

给定一个 ul 或一组 div 中的任意项目列表，我想使用 Angular 方式将所选项目带到列表/显示的顶部。

$scope.items = [{name: "Garfield", id: 1}, {name: "Simon", id: 2}, {name: "Whatever", id: 3}]
$scope.model = {selectedItemId: 3}

在 View 中，使用ng-repeat

ul.items
  li.item ng-repeat="item in items" ng-class="{selected: model.selectedItemId == item.id"
    div {{item.name}}

我希望将所选项目过滤或排序到列表顶部，同时使用 AngularJS 方法保持剩余顺序不变。

Answer 1

由于您的数据已经很好地格式化为数组，因此您将使用自定义过滤器。

Angular 提供了许多内置过滤器，但编写自己的过滤器非常容易。我本来打算在这里放一个例子，但搜索发现了 Sam Deering 创建的一个非常好的例子 here我真的无法改进。

为了便于访问，以下是代码的相关部分:

app.filter('currentUserToTop', function () {
    return function (users, current) {
        var newList = [];
        angular.forEach(users, function (u) {
            if (u.id == current) {
                newList.unshift(u);
            }
            else {
                newList.push(u);
            }
        });
        return newList;
    };
});

Here是与此示例相关的 fiddle 。