AngularJS orderBy expression with subtraction

Question

I have an expression

{{ product.SelectedProduct.BasePrice - product.SelectedProduct.Discount | currency  }}

I need to be able to order my products by the value of baseprice - discount. Is there a way to do this? So I want something like

{{product.SelectedProduct.ProductName | 
orderBy : product.SelectedProduct.BasePrice - product.SelectedProduct.Discount }}

New code:

<div class="row-fluid">
            <span class="mktpl_productnm" ng-show="product.SelectedProduct.ProductName">{{product.SelectedProduct.ProductName || 'product not available' | orderBy: price }}</span>
            <span ng-hide="product.SelectedProduct.ProductName" class="field-validation-error">Product not available</span>
            <span ng-show="product.SelectedProduct.remaining < product.SelectedProduct.prodterm.minQuantity" class="field-validation-error">
                (Out of stock)
            </span>
        </div>

 vm.price = function (product) {
        debugger;
        return product.SelectedProduct.BasePrice - product.SelectedProduct.Discount;
    };

create a custom filter or add a property to each item in controller or service — charlietfl, Oct 27 '15 at 18:48
you can also filter by function. @Explosion Pills, orderBy is a usual filter, nothing more. — Petr Averyanov, Oct 27 '15 at 18:52
@ExplosionPills I'm using it with a list of products. I didn't write the code, I'm just trying to edit it. Do you need me to add more code to my question? — hollyquinn, Oct 27 '15 at 18:52
http://stackoverflow.com/questions/16474091/angular-custom-filter-function or similar, internet is full of examples — Petr Averyanov, Oct 27 '15 at 18:54

score 2 · Accepted Answer · answered Oct 27 '15 at 18:56

First of all, your example doesn't make much sense: orderBy applies to an array, to order the elements of this array. But product.SelectedProduct.ProductName is probably not an array.

Second: the documentation says:

expression function()stringArray.<(function()|string)>=

A predicate to be used by the comparator to determine the order of elements.

Can be one of:

function: Getter function. The result of this function will be sorted using the <, ===, > operator. [...]

So, all you need is a function in the scope that returns the element to compare for a given element of the array:

$scope.reducedPrice = function(product) {
    return product.SelectedProduct.BasePrice - product.SelectedProduct.Discount;
};

and in the view:

{{ productArray | orderBy:reducedPrice }}

Another option would be to precompute the reducedPrice and store it as an attribute or the product, and then simply use

{{ productArray | orderBy:'reducedPrice' }}

JB I edited my code above to show you what I did. It's not working. Am I missing something? Thanks for your help — hollyquinn, Oct 27 '15 at 19:07
Yes, you're missing something. orderBy is used to sort elements of an **array** (of products, in this case). But you're applying it to the name of one product. That makes no sense. That's the very first sentence of my answer. — JB Nizet, Oct 27 '15 at 20:38

AngularJS orderBy expression with subtraction

1 Answers1