Question

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

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

在视图中，使用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是与此示例相关的小提琴。

将单个项目置于列表顶部

1 个答案: