It uses Angular’s awesome chaining filter sorting by online, then by username.
.png)
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
var app = angular.module('MyApp', []); 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; }; }); function MyCtrl($scope) { $scope.users = [{ "id": 5, "username": "sam", "online": true }, { "id": 6, "username": "sam2", "online": true }, { "id": 4, "username": "admin", "online": true }, { "id": 2, "username": "user2" }, { "id": 3, "username": "user3", "online": true }, { "id": 1, "username": "user1" }]; } |
ngHTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app='MyApp'> <div ng-controller="MyCtrl"> <p>Sort by online:</p> <ul> <li data-ng-repeat="u in users | orderBy:'username' | orderBy:'online'" ng-class="{online:u.online}"><span>{{u.id}} - {{u.username}}</span> </li> </ul> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
li.online { background:green; } li.online span { color: #FFF; font-weight: bold; } |
“It [..] sorting by a) sort by username, then b) sort by username.” – Really??
And the filter you created, called “currentUserToTop”, you don’t even use it ?!?!
Whooops! Good spot Marco, thanks.