AngularJS | orderBy filter not updated dynamically

Question

I'm having trouble with the orderBy filter in AngularJS. Here's my setup:

<li ng-repeat="item in listItems.data | orderBy:order">
    <a ng-click="getRelated(item._id)">{{ item.title }}</a>
</li>

Part of the controller:

$scope.order = 'year';

$scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $scope.params.letter});

$scope.setOrder = function(order) {
    $scope.order = order;
}

And finally the "switches" I would like to use for ordering the data

    <span class="sort--title">Sort by</span>
    <a ng-class="{true:'selected', false:''}[order=='title']" href="" ng-click="setOrder('title')" class="sort--attribute">Title</a>
    <a ng-class="{true:'selected', false:''}[order=='year']" href="" ng-click="setOrder('year')" class="sort--attribute">Year</a>
    <a ng-class="{true:'selected', false:''}[order=='length']" href="" ng-click="setOrder('length')" class="sort--attribute">Length</a>
    <a ng-class="{true:'selected', false:''}[order=='date_added']" href="" ng-click="setOrder('date_added')" class="sort--attribute">Date Added</a>

When I click the buttons, the list is not being re-ordered. When I manually change the initial $scope.order value, the list is ordered by the property. Also ng-class is updated correctly. I'm obviously missing out something!

Can you make a jsFiddle of your problem? I can't see what the data returned by your post function looks like. — Mathew Berg
– Mathew Berg, Commented Dec 23, 2012 at 15:20
I'm not so sure that the data is relevant in this case. My question basically is, how to make the ng-repeat data force to reload when the orderBy parameter changes. Or is this somehow related to the data? — Teo.sk
– Teo.sk, Commented Dec 24, 2012 at 1:04
It seems right to me. I think you should try to setup a jsFiddle. I think maybe some other things go wrong. — maxisam
– maxisam, Commented Dec 25, 2012 at 8:45

maxisam · Accepted Answer · 2012-12-25 09:29:57Z

12

I don't think your idea is wrong. It does work. Here is the working plunker.

You must have something wrong somewhere else.

app.js

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

app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.friends = [
        {name: 'John', phone: '555-1276'},
        {name: 'Mary', phone: '800-BIG-MARY'},
        {name: 'Mike', phone: '555-4321'},
        {name: 'Adam', phone: '555-5678'},
        {name: 'Julie', phone: '555-8765'}
    ];
    $scope.setOrder = function (order) {
        $scope.order = order;
    };
}]);

main html

<ul class="nav nav-pills">
    <li ng-class="{'active': order=='name'}"><a href="#" ng-click="setOrder('name')">name</a></li>
    <li  ng-class="{'active': order=='phone'}"><a href="#" ng-click="setOrder('phone')">phone</a></li>
</ul>
<ul>
    <li data-ng-repeat="friend in friends|orderBy:order">
        <span class="name">{{friend.name}}</span>
        <span class="phone">{{friend.phone}}</span>
    </li>
</ul>

answered Dec 25, 2012 at 9:29

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Teo.sk Over a year ago

I have found out, what was causing the problem. My what-I-thaught-to-be default setting of order var in the beginning of the controller: $scope.order = 'year'; I compared your code to mine and that was the only difference, and removing it helped. I don't understand though, why is setting a variable this way causing the effect... I'm gonna accept your answer anyway, it helped me find the bug.

maxisam Over a year ago

Well, I don't think that matter. You can try to do that in my code too. You can try $scope.order = 'name'; But thanks for accepting my answer. I'm glad I can help.

Teo.sk Over a year ago

it actually matters, and I've encountered it again, and asked another question: stackoverflow.com/questions/14075741/… This was the case also with the $scope.order and I have no idea currently why is it so :)

maxisam Over a year ago

Do you try it in my plunker ?

Teo.sk Over a year ago

yes, also in a separate fiddle, and it works.. that's why I'm confused.. I described the problem more deeply in my linked question.. I got already one answer, but I'm too tired now, will try that tomorrow, I'll keep you updated.

|

user2076106 · Accepted Answer · 2016-07-22 23:17:59Z

2

I know its an old question but anyone else having the same issue might find this useful. I had the same issue. Clicks to anchor were reloading the page and hence, the order was being set to default whenever you click any table header. This also explains why not setting the order to a default globally fixed it for you.

I replaced my anchor with a span element and it worked fine.

answered Jul 22, 2016 at 23:17

user2076106

10511 bronze badges

2 Comments

StepUp Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

user2076106 Over a year ago

I believe this provides an exact explanation to what the asker is confused about. There is an assumption I have made that the asker's page was also reloading but its a safe assumption since clicks on anchor are supposed to reload the page.

Collectives™ on Stack Overflow

AngularJS | orderBy filter not updated dynamically

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related