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

I working on angularjs. I am trying to reorder the ng-repeat list. There is list of online users. 动态重新排序/排序ng-repeat列表
Users can receive messages anytime. Whenever user receive the message i update the ui and show the recent message under the name. I am trying to sort the user list based on the users who receive the recent message. The user who receive the messages should come at the top.

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

Some codes- Userlist controller:

一些代码 - 用户列表控制器:

$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>

2 个解决方案

#1

What you'll probably want to do is order the ng-repeat:

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

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

This will order the users on the time property of each user. It's also possible to reverse the sort order with -time.

这将根据每个用户的时间属性对用户进行排序。也可以使用-time反转排序顺序。

For more information on the orderBy filter, check the angular documentation.

有关orderBy过滤器的更多信息,请查看角度文档。

#2

We can do this by using orderBy.Now it depends upon the requirement.In your case it is time.

我们可以通过使用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>

#1