Question

我正在研究angularjs。我正在尝试重新排序ng-repeat列表。有在线用户列表。 enter image description here
用户可以随时接收消息。每当用户收到消息时，我都会更新ui并在名称下显示最近的消息。我正在尝试根据收到最近消息的用户对用户列表进行排序。收到邮件的用户应该位于顶部。

部分守则─ 用户列表控制器：

$scope.$watch('service.get.userList()', function (values) {

    var result = [];
    angular.forEach(values, function (value) {


        processChatService.registerObserverCallback('lastMessage', function () { //i call this event when user receives the message
            $scope.$apply(function () {
                value.l = processChatService.get.lastMessage(value.u); //returns the recent message
                value.time = processChatService.get.lastMessageTime(value.u); //returns time
            });
        });
        value.l = processChatService.get.lastMessage(value.u); //it returns null if user havent recieve message
        value.time = processChatService.get.lastMessageTime(value.u);

        result.push(value);
    });
    $scope.users = result;
});

html ：

<div ng-repeat="user in users  | filter:search"> <a class="list-group-item" ng-click="click(user)" ng-href="">
                        <div class="row">
                            <div class="col-xs-2">
                                <div class="thumb-userlist-sm pull-left mr">
                                    <img class="img-circle"  ng-src="{{ user.p }}" alt="...">
                                </div>
                            </div>
                            <div class="col-xs-8">
                                <div class="message-sender">{{ user.n }}</div>
                                <div class="message-preview">{{user.l}}</div>
                            </div>
                            <div class="col-xs-2">
                                <div class="pull-right">{{user.time}}</div>
                            </div>
                        </div>
                    </a>

    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-10">
            <div class="line-separator"></div>
        </div>
    </div>
</div>

Answer 1

您可能想要做的是订购ng-repeat：

<div ng-repeat="user in users  | filter:search | orderBy: 'time'">

这会在每个users的{{1}}属性上排序time。也可以使用user来反转排序顺序。

有关orderBy过滤器的更多信息，请查看angular documentation。

Answer 2

我们可以通过使用orderBy来做到这一点。现在它取决于要求。在你的情况下是时候了。

<div ng-repeat="user in users  | filter:search | orderby:'time'"> <a class="list-group-item" ng-click="click(user)" ng-href="">
                        <div class="row">
                            <div class="col-xs-2">
                                <div class="thumb-userlist-sm pull-left mr">
                                    <img class="img-circle"  ng-src="{{ user.p }}" alt="...">
                                </div>
                            </div>
                            <div class="col-xs-8">
                                <div class="message-sender">{{ user.n }}</div>
                                <div class="message-preview">{{user.l}}</div>
                            </div>
                            <div class="col-xs-2">
                                <div class="pull-right">{{user.time}}</div>
                            </div>
                        </div>
                    </a>

    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-10">
            <div class="line-separator"></div>
        </div>
    </div>
</div>

动态重新排序/排序ng-repeat列表

2 个答案: