I am currently working with AngularJS and focusing on reordering the ng-repeat list. The list represents online users who can receive messages at any time. When a user receives a message, I update the UI to display the most recent message beneath their name.
To achieve this, I am sorting the user list based on those who have received the most recent messages. Users who receive messages should be displayed at the top of the list.
Here is an excerpt of the code:
$scope.$watch('service.get.userList()', function (values) {
var result = [];
angular.forEach(values, function (value) {
processChatService.registerObserverCallback('lastMessage', function () { // Triggered when the user receives a message
$scope.$apply(function () {
value.l = processChatService.get.lastMessage(value.u); // Retrieves the latest message
value.time = processChatService.get.lastMessageTime(value.u); // Gets the timestamp
});
});
value.l = processChatService.get.lastMessage(value.u); // Returns null if the user hasn't received a 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>