Use filter on ng-options to change the value displayed

Question

I have an array of prices (0, 0.99, 1.99... etc) that I want to display in <select>.

I want to use Angular's ng-options like this

<select ng-model="create_price" ng-options="obj for obj in prices"/>

As it is displayed above it will generate a selection of 0, 0.99, 1.99...

But I want to use a filter in the code such that every time the word 'prices' is presented (or something like that), the code will run a function to change the float numbers to strings and present (free, 0.99$, 1.99$... etc).

I there a way to do that?

Thanks

Answer 1

There's a better way:

app.filter('price', function() {
  return function(num) {
    return num === 0 ? 'free' : num + '$';
  };
});

Then use it like this:

<select ng-model="create_price" ng-options="obj as (obj | price) for obj in prices">
</select>

This way, the filter is useful for single values, rather than operating only on arrays. If you have objects and corresponding formatting filters, this is quite useful.

Filters can also be used directly in code, if you need them:

var formattedPrice = $filter('price')(num);

Answer 2

You want to create the custom filter such as:

app.filter('price', function() {
  return function(arr) {
    return arr.map(function(num){
      return num === 0 ? 'free' : num + '$';
    });
  };
});

use it like:

<select ng-model="create_price" ng-options="obj for obj in prices | price">
  {{ obj }}
</select>

Answer 3

Pardon the pseudo code

data-ng-options="( obj.property | myFilter ) for obj in objects"

app.filter('myFilter', function() {
  return function(displayValue) {
    return (should update displayValue) ? 'newDisplayValue' : displayValue;
});