apply formatting filter dynamically in a ng-repeat

by

The | is an angular construct that finds a defined filter with that name and applies it to the value on the left. What I think you need to do is create a filter that takes a filter name as an argument, then calls the appropriate filter (fiddle) (adapted from M59’s code):

HTML:

<div ng-repeat="row in list">
    {{ row.value | picker:row.formatter }}
</div>

Javascript:

app.filter('picker', function($filter) {
  return function(value, filterName) {
    return $filter(filterName)(value);
  };
});

Thanks to @karlgold’s comment, here’s a version that supports arguments. The first example uses the add filter directly to add numbers to an existing number and the second uses the useFilter filter to select the add filter by string and pass arguments to it (fiddle):

HTML:

<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p>
<p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>

Javascript:

app.filter('useFilter', function($filter) {
    return function() {
        var filterName = [].splice.call(arguments, 1, 1)[0];
        return $filter(filterName).apply(null, arguments);
    };
});

More Related Contents:

  1. How can I group data with an Angular filter?
  2. AngularJS – how to get an ngRepeat filtered result reference
  3. ngRepeat Filter by deep property
  4. AngularJS : Asynchronously initialize filter
  5. AngularJS routing without the hash ‘#’
  6. AngularJS passing data to $http.get request
  7. Angular IE Caching issue for $http
  8. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  9. How to add many functions in ONE ng-click?
  10. How to reload or re-render the entire page using AngularJS
  11. orderBy multiple fields in Angular
  12. Dynamic variables names in javascript
  13. AngularJS – Image “onload” event
  14. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  15. AngularJS Directives: Change $scope not reflected in UI
  16. Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
  17. How to make lodash work with Angular JS?
  18. UI-router interfers with $httpbackend unit test, angular js
  19. Handle open/collapse events of Accordion in Angular
  20. how to bind Bootstrap-datepicker element with angularjs ng-model?
  21. Angularjs does not load scripts within ng-view
  22. Angular $http is sending OPTIONS instead of PUT/POST
  23. Hour difference between two times(HH:MM:SS a)in momentjs
  24. How can I use HTTPS in AngularJS?
  25. Validate phone number using angular js
  26. AngularJS ng-include inside of Google Maps InfoWindow?
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. How is AngularJS different from jQuery
  29. how to fix 404 warnings for images during karma unit testing
  30. How do I pass multiple attributes into an Angular.js attribute directive?

Leave a Comment