How to orderBy a array of objects in descending order in angularjs?
Asked Answered
M

4

8

I have a very simple array of objects and I want to sort it using $filter('orderBy') in javascript. Somehow it doesn't seem to work. jsFiddle

Here is the code

var app = angular.module('myApp', []);

app.controller('myController', function($scope, $filter){
    var person = [{
  name : "Saras"
  },
  {
  name : "Arya"
  }];
  $filter('orderBy')(person, 'name');
  console.log(person);
});

I don't understand why I can't get this to work? Help is appreciated. And the solution should be in JS not in HTML.

Monet answered 22/7, 2016 at 20:6 Comment(0)
B
10

You should pass 2nd parameter as property name name, then assign that filtered result to desire scope variable wherever you want. So there will not be any filtering needs to be done on UI ng-repeat output.

$scope.person = $filter('orderBy')(person, 'name');

<div  ng-repeat="p in person">
   {{p.name}}
</div>

Forked Fiddle Here


If you wanted to see it on view you should keep that property on one of scope variable, or rather you can do this simple filtering on client side as well while displaying records.

<div  ng-repeat="p in person | orderBy: 'name'">
   {{p.name}}
</div>

Demo here

Blueweed answered 22/7, 2016 at 20:10 Comment(9)
It doesn't work... Could you post the link of a working fiddle... From the one given in question.Monet
I have updated my answer, could you please look into the fiddle which I have in my answer?Blueweed
Can't the $scope.person array be modified in the controller file?Monet
@SarasArya yes, it can be modified from controllerBlueweed
@SarasArya here you go, find fiddle hereBlueweed
Okay, so the mistake was. I was thinking that $filter('orderBy') would change the array itself. It didn't you have to get the output in another variable which does the trick. Is it right?Monet
correct. that will return a new array which is filtered one, you have to reassign back to the desired variable again to see the changesBlueweed
if you want to sort in descending order then set true in third parameter like this: $scope.person = $filter('orderBy')(person, 'name', true);Divebomb
@PankajParkar That's a perfect answer(both ways), it works well!!. However, for descending order covered by SumitJoshi. Thanks.Underlet
L
12

Adding + or - prefix on orderBy parameter will order by + (ascending) or -(desc);

example:

<li ng-repeat="x in customers | orderBy : '-city'">
    {{x.name + ", " + x.city}}
</li>

more at : http://www.w3schools.com/angular/ng_filter_orderby.asp

Or if you want to console.log it then just add name as parameter in quotations :

$filter('orderBy')(person, 'name');
Liebman answered 22/7, 2016 at 20:10 Comment(1)
U can also use ! : <li ng-repeat="x in customers | orderBy : '!city'">Cysteine
B
10

You should pass 2nd parameter as property name name, then assign that filtered result to desire scope variable wherever you want. So there will not be any filtering needs to be done on UI ng-repeat output.

$scope.person = $filter('orderBy')(person, 'name');

<div  ng-repeat="p in person">
   {{p.name}}
</div>

Forked Fiddle Here


If you wanted to see it on view you should keep that property on one of scope variable, or rather you can do this simple filtering on client side as well while displaying records.

<div  ng-repeat="p in person | orderBy: 'name'">
   {{p.name}}
</div>

Demo here

Blueweed answered 22/7, 2016 at 20:10 Comment(9)
It doesn't work... Could you post the link of a working fiddle... From the one given in question.Monet
I have updated my answer, could you please look into the fiddle which I have in my answer?Blueweed
Can't the $scope.person array be modified in the controller file?Monet
@SarasArya yes, it can be modified from controllerBlueweed
@SarasArya here you go, find fiddle hereBlueweed
Okay, so the mistake was. I was thinking that $filter('orderBy') would change the array itself. It didn't you have to get the output in another variable which does the trick. Is it right?Monet
correct. that will return a new array which is filtered one, you have to reassign back to the desired variable again to see the changesBlueweed
if you want to sort in descending order then set true in third parameter like this: $scope.person = $filter('orderBy')(person, 'name', true);Divebomb
@PankajParkar That's a perfect answer(both ways), it works well!!. However, for descending order covered by SumitJoshi. Thanks.Underlet
D
1

Example:

<tr ng-repeat="friend in friends | orderBy:'-age'">
    <td>{{friend.age}}</td>
    <td>{{friend.name}}</td>
</tr>

Use '-' Symbol Before your expression

Degauss answered 14/10, 2018 at 6:25 Comment(2)
Hi Muhammad, can you explain what your answer provides in addition to the already given answers?Nikolaus
@ArtjomB. I give that what expression should have to use beside value . for clarification . i give commentsDegauss
S
0

$scope.person = $filter('orderBy')($scope.person , 'name', true);

true for descending order and false for ascending order

Strow answered 19/9, 2019 at 10:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.