CODEWITHSUNDEEP
angularjssortingfiltercurrency
DrNio
DrNio

Reputation: 1976

How to sort results after I filtered them with angular

I have a table and each row has a column with an amount of money. That amount can be in different currency. For now I have two different currencies, for example euros and dollars.

In order to sort that table by amount of money (low-to-high or reverse) I should first convert the amount in dollars for example and then sort the table.

So, I have an order function that works well reference : https://docs.angularjs.org/api/ng/filter/orderBy

I created a filter 'currency' that converts the amount from euros to dollars (i have this as default). The currency converter works good.

But, when I click the button for ordering, I see the results with the converted currency but the table is ordered with the numeric value of the first results.

ng-click="changeCurrencyToDollars(); order('bonus_amount');"

For example the initial data is :

  1. 10 US Dollar
  2. 9 Euros

and it is converted to :

  1. US Dollar
  2. 11.14 US Dollar

Any ideas why the sorting is not working on the converted currency (filtered results) ?

Thanks

Controller: 

$scope.convertedCurrency = false; //initial table data with mixed currencies

$scope.changeCurrencyToDollars = function (){
        $scope.convertedCurrency = $scope.convertedCurrency ? false: true;
    };

$scope.order = function(predicate){
        $scope.predicate = predicate;
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.operators = orderBy($scope.operators, predicate, $scope.reverse);
    };

app.filter('currency', [function() {
    var defaultCurrency = 'Dollars';
    return function(input, currencySymbol){
        var out = "";
        currencySymbol = currencySymbol || defaultCurrency;

        switch (currencySymbol){
            case 'Dollars':
                out = input;
                break;

            case 'EUR':
                out = 1.11 * input; // convert to dollars
                currencySymbol = defaultCurrency;
                break;

            default:
                out = input;
        }

        return out.toFixed(0) + ' ' + currencySymbol;
    }
}]);

View: Inside the ng-repeat:

<span class="highlight-word" ng-if="!convertedCurrency">{{operators.bonus_amount}} {{operators.bonus_currency}}</span>
<span class="highlight-word" ng-if="convertedCurrency">{{operators.bonus_amount | currency: operators.bonus_currency}}</span>

Upvotes: 0

Views: 400

Answers (2)

Theo Itzaris
Theo Itzaris

Reputation: 4681

you have not given your object but ,let's say that is it like this:

$scope.operator = [{
bonus_amount:'100',
bonus_currency:'Dollars'},
{
bonus_amount:'10',
bonus_currency:'Dollars'},
{
bonus_amount:'150',
bonus_currency:'Dollars'}];

Now let's add the currency filter(you put your custom filter to make the conversion) and the orderby filter, and show the data: In your ng-repeat you add the 'orderBy' filter and then, when you show the data you add the 'currency' filter:

<li ng-repeat="operators in operator | orderBy:'+bonus_amount'">{{operators.bonus_amount | currency }}</li>

Hope helps, good luck.

Upvotes: 0

DrNio
DrNio

Reputation: 1976

How I solved it:

I inserted a new property to every object with the converted value. That way every object had a "dollars" property. And for sorting I used the same $scope.order, since it was working but with the new property of the object. Not the best angular solution, but at least the "weight" was in the controller and not in the view.

Upvotes: 0

Related Questions