Search code examples
angularjsangularjs-ng-repeatangularjs-orderby

AngularJS: OrderBy Filter on Option Select


I'm making a small application that sorts a list of points that users have similar to a game leaderboard. I've set up an ng-repeat over an array of objects and an ng-show on different option selects to show a span within the list. The spans show different point scores.

I've added a orderBy filter on the ng-repeat so the list is filtered from largest to smallest. For instance, when the option select of 'Threads Created' is chosen, then the scores for 'Post Read' and 'Posts Replied' are hidden and the list is sorted by the number of Threads Created (largest to smallest).

It works for two of the option values but not the third. Any idea why?

              <tr ng-repeat="user in users | orderBy:['-created','-read','-replied']">
            <td> {{user.index}} </td>
            <td> {{user.firstName}} {{user.lastName}}</td>
            <td>
              <span ng-show='discussionsSelect == "created"'>{{ user.created }}</span>
              <span ng-show='discussionsSelect == "read"'>{{ user.read }}</span>
              <span ng-show='discussionsSelect == "replied"'>{{ user.replied }}</span>
            </td>
          </tr>

Solution

  • If I'm understanding this correctly you are not doing this properly. Your list will only ever be sorted by 'created'. The second value of the orderBy clause will only come into play if two objects with the same 'created' are found. Likewise for the third value in your orderBy clause. It will only ever be used if two items have the same 'created' and then the same 'read' value.
    You're going to need to make orderBy a variable that gets set based on the pulldown chosen. You can set it to the name of the variable that your select is bound to. I think that is discussionsSelect in your plnkr.

            <tr ng-repeat="user in users | discussionsSelect">