How to use an angularJs filter on items label within ng-options

Question

Given a select list loaded with product options, I want the label to be in the format of option name and then price in parenthesis. So for example: "Product Option B ($1,432.12)". My option object has the properties "name" and "price". Price is numeric, I want it formatted with the currency filter. How would I do this? I'm thinking maybe a custom filter that takes a string and numeric value. Just not sure how I would be able to apply the filter within ng-options.

The following code just displays the name (not price):

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name for option in category.options"></select>

Couldn't you just decorate your model in the controller/directive with something like a displayName attribute? — Mike Quinlan
– Mike Quinlan, Commented May 2, 2014 at 22:20

Sebastian · Accepted Answer · 2014-05-02 21:52:35Z

30

This should work for you:

<select class="form-control"
    ng-model="selectedOption"
    ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>

This will render a drop-down with items in this form: Item A (USD$14.00)

http://jsfiddle.net/6MYc3/

edited May 2, 2014 at 21:52

answered May 2, 2014 at 21:41

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

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

2 Comments

Gondil Over a year ago

This is perfect but I have one problem. I have options which I want to show like this code - desc. But one of my options is code="", desc="" and in the result I get " - " but I want just to be blank as "". How can I achieve this please?

Gondil Over a year ago

oh I see option.code as option.code==='' ? '' : (option.code + ' - ' + option.desc) for option in options

Collectives™ on Stack Overflow

How to use an angularJs filter on items label within ng-options

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related