Use filter on ng-options to change the value displayed

by

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);

More Related Contents:

  1. Limit the length of a string with AngularJS
  2. ng-change get new value and original value
  3. exact filter in angular
  4. Angularjs: ng-options group by
  5. ng-options with disabled rows
  6. ng-options with simple array init
  7. Angularjs ng-options using number for model does not select initial value
  8. How to set the value attribute for select options?
  9. The Advantages when we put AngularJS within Symfony web application
  10. How to call a method defined in an AngularJS directive?
  11. How to execute AngularJS controller function on page load?
  12. How do I store data in local storage using Angularjs?
  13. Angularjs dynamic ng-pattern validation
  14. Is there a way to make AngularJS load partials in the beginning and not at when needed?
  15. What’s the difference between ng-model and ng-bind
  16. Angular js init ng-model from default values
  17. What’s the most concise way to read query parameters in AngularJS?
  18. Implementing loading spinner using httpInterceptor and AngularJS 1.1.5
  19. How to get element by classname or id
  20. Dynamically set the value of ui-sref Angularjs
  21. How do you get AngularJS to bind to the title attribute of an A tag?
  22. bootsrap nav-bar collapsable cannot make it work
  23. How to modify scope from within a directive in AngularJs
  24. Setting dynamic scope variables in AngularJs – scope.
  25. How to create a localhost server to run an AngularJS project
  26. What is ng-transclude?
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment