1

So I am trying to use the orderby function of angularjs. Currently I have an original data set.

    $scope.customers = [
    {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
    {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
    {"name" : "Bon app", "city" : "Marseille"},
    {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
    {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
    {"name" : "Around the Horn", "city" : "London"},
    {"name" : "B's Beverages", "city" : "London"}
];

 $scope.reverse= false;

 $scope.toggleOrder = function(){
  $scope.reverse=!$scope.reverse;

 }

If I use the following to display my customers, I would get the array reverse ordered by the city. Currently I could click on the toggle button and reverse the array if wanted to.

 <button ng-click="toggleOrder()">ToggleReverse</button >

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

But now the issue is if I didn't want the orderBy function at all. If I wanted to get my original customers data without any order how could I do that with the same toggleOrder function?

For instance, When I load the data it would be the original array. If 1st click of the toggleOrder button, it would sort in based on city, 2nd click of the toggleOrder button would reverse sort the city, and third click of the toggleOrder button would have no sort and give me the original array, and so on.

If the orderBy function isn't the best to go by let me know.

Any help would be great!

1
  • " When I load the data it would be the original array. If 1st click of the toggleOrder button, it would sort in based on city, 2nd click of the toggleOrder button would reverse sort the city, and third click of the toggleOrder button would have no sort and give me the original array, and so on.". Are you sure that you want to do it? I think you should rethink why do you need this.. Aug 15, 2016 at 2:23

3 Answers 3

1

I'm not sure why you want to add this feature on your application, but here you go:

(function() {
  'use strict';

  angular
    .module('app', [])
    .constant('BUTTON_VALUES', {
      1: 'Ascending',
      2: 'Descending',
      3: 'No order',
    })
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', 'BUTTON_VALUES'];

  function MainCtrl($scope, BUTTON_VALUES) {
    $scope.customers = [
      {
        "name": "Bottom-Dollar Marketse",
        "city": "Tsawassen"
      },
      {
        "name": "Alfreds Futterkiste",
        "city": "Berlin"
      },
      {
        "name": "Bon app",
        "city": "Marseille"
      },
      {
        "name": "Cactus Comidas para llevar",
        "city": "Buenos Aires"
      },
      {
        "name": "Bolido Comidas preparadas",
        "city": "Madrid"
      },
      {
        "name": "Around the Horn",
        "city": "London"
      },
      {
        "name": "B's Beverages",
        "city": "London"
      }
    ];

    $scope.btnValue = BUTTON_VALUES[3];
    $scope.reverse = true;
    $scope.orderParam = '';
    var increment = 0;
    
    $scope.toggleOrder = function() {
      increment++;
      $scope.btnValue = BUTTON_VALUES[increment];
      switch (increment) {
        case 1:
        case 2:
          $scope.orderParam = 'city';
          $scope.reverse = !$scope.reverse;
          break;
        case 3:
          $scope.orderParam = '';
          increment = 0;
          break;
      }      
    }
  }
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <button ng-click="toggleOrder()">{{btnValue}}</button>
  <pre ng-bind-template="Order - {{orderParam}}"></pre>
  <pre ng-bind-template="Reverse? {{reverse}}"></pre>
  <hr>
  <li ng-repeat="x in customers | orderBy : orderParam: orderParam && reverse">{{x.name + ", " + x.city}}</li>
</body>

</html>

Note: I added a constant as an example to demonstrate how you can handle your button name.

I hope it helps.

3
  • So if orderParam which is your criteria is false/null then it doesn't provide a orderBy result? Aug 15, 2016 at 3:15
  • @JuliusDoan: No, it doesn't provide a orderBy result when it's blank '', as you can see above. Have you tested it? Aug 15, 2016 at 3:19
  • Sorry I haven't checked the solution. I will try it out tonight but I will assume it works based on the code snippet u have sent. Aug 15, 2016 at 19:42
1

So, you want the original order the third time you click on the order by button. Seems doable but complicated. Maybe instead you should have another button that is labeled "original order" and a hidden column that lists the index of your original order. Pushing that button orders by that original index.

1
  • Wouldn't that mean I would have to have two views for the where I would show a data-ng-show when it is toggled the first and second time? That just seems like it would be bad practice there. Aug 15, 2016 at 1:58
1

/edited I rather use another approach of angualrjs filters which is basically taking string as param and matching it to the object in list. jsfiddle.net/2q14sryb Hope it works!

3
  • Well I am creating a search results page. So I order by a filtering method in the backend. Then if the user chooses to filter alphabetically of the results then it will offer that from the front end side. So similar to spotify's function of sorting songs/artists/albums etc. Aug 15, 2016 at 2:00
  • There's another way of using filters in angularjs which I'm providing here jsfiddle.net/2q14sryb hope it solves your problem - click on the name title 3 times.
    – Pexa
    Aug 15, 2016 at 10:52
  • So I was looking at your solution and I noticed that you inject orderByFilter as well as using the "filter:searchText". can you explain why you are using these because I see no relevance? Aug 16, 2016 at 22:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.